localStorage、sessionStorage、Cookie用法小记

1.webStorage(本地存储，客户端（浏览器存储）)

(1) localStorage:生命周期永久（除非自己清除），大小为5M；

(2) sessionStorage:仅当前会话有效（浏览器关闭或网页关闭就自动清除），大小为5M；

(3) 兼容

①桌面浏览器

② 移动端

（4）用法 localStorage、sessionStorage有相同的API调用

      ①localStorage.setItem("key","value");//以“key”为键名存储一个键值“value”
    localStorage.getItem("key");//获取键名为“key”的键值
    localStorage.removeItem("key");//删除键名为“key”的信息。

localStorage.clear();//清空所有localStorage中存储的信息

②也可以通过 '.' 点的形式

存储：localStorage.userName="tom";

获取：console.log(localStorage.userName) 得到"tom";

清除：localStorage.removeItem("userName") 清除userName；

（5）注意点

① 不同的浏览器之间不能共享localStorage、sessionStorage；

② 相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息；

③ localStorage不能直接存储和获取对象（需要进行处理）；

(6) 对于对象的问题

① 先通过JSON.stringify()转为字符串进行存储，使用时再通过JSON.parse()转回来即可；

② 例子

var msg={
	"name":"tom",
	"age":20,
	"job":"web"
}
localStorage.myself = JSON.stringify(msg);
console.log(JSON.parse(localStorage.myself).name);
console.log(JSON.parse(localStorage.myself).age);


console.log(JSON.parse(localStorage.myself).job);

③结果：

(7)JSON.stringify()浏览器兼容性

2.cookie

(1) 在过期之前一直有效，即使浏览器关闭，大小为4kb，不同浏览器对个数（一般为20）有不同限制，用cookie存储过多数据会带来性能问题。

(2)原生的cookie不友好，需要封装使用

①设置Cookie函数

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

②获取Cookie函数

function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { 
        	return c.substring(name.length,c.length); 
        }
    }
    return "";

}

③检测Cookie函数

function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("Cookie未失效");
    }
    else {
        //Cookie已失效，需要重新设置
        if (user!="" && user!=null){
        	//进行重新设置Cookie
            //setCookie("username",user,30);
        }
    }
}

localStorage、sessionStorage、Cookie用法小记

猜你喜欢