localStorage , sessionStorage ,cookie 使用介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>存储</title>
</head>
<body>
    <div>
        localStorage
    </div>
    <div>
        sessionStorage
    </div>
    <div>
        cookie
    详细介绍 http://www.cnblogs.com/pangzi666/p/5889948.html
</div> <script type="text/javascript"> // 设置存储 localStorage.a = 3;//设置a为"3" localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值 localStorage.setItem("b","isaac");//设置b为"isaac" // 读取存储 var a1 = localStorage["a"];//获取a的值 var a2 = localStorage.a;//获取a的值 var b = localStorage.getItem("b");//获取b的值 // 删除存储 // localStorage.removeItem("b");//清除c的值 // localStorage.clear(); // 清除所有 // .key() 获取 localstorage 的键值 function localStoragea(){ for(var i = 0;i<localStorage.length;i++){ console.log(localStorage.key(i)); } } localStoragea(); // 需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换 // sessionStorage // 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。 // 用法和localStorage 基本一样 // cookie // cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。 </script> </body> </html>

我们也可以把它简单封装一下

function SetLS(key, json){
	window.localStorage.setItem(key, JSON.stringify(json));
}

function GetLS(key){
	var str = window.localStorage.getItem(key);
	if (str != null && str != "")
		return JSON.parse(str);
	else
		return false;
}
function ClearLS(key){
	localStorage.clear();
}

有兴趣的可以使用一下。

原文地址:https://www.cnblogs.com/pangzi666/p/5939764.html