sessionStorage 、localStorage 和 cookie区别及使用

共同点

都是保存在浏览器端，且同源的。

不同点

cookie

1、会在请求时发送到服务器，作为会话标识，服务器可修改cookie；
2、cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下，子路径可以访问父路径cookie，父路径不能访问子路径cookie；
3、存储大小，浏览器不能保存超过300个cookie，单个服务器不能超过20个，每个cookie不能超过4k；
4、生命周期：在设置的有效期内有效，默认浏览器关闭；
5、共享：cookie在同源且符合path规则的文档之间共享

sessionStorage

1、不会自动把数据发给服务器，仅在本地保存
2、生命周期：生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了
3、共享：不同页面或标签页间无法共享sessionStorage的信息
4、大小：一般为5M

localStorage

1、不会自动把数据发给服务器，仅在本地保存
2、生命周期：除非被用户清除，否则永久保存
3、共享：相同浏览器的不同页面间（同源）可以共享相同的 localStorage（页面属于相同域名和端口）
4、大小：一般为5M
5、localStorage的修改会促发其他文档窗口的update事件

用法

cookie

设置：

document.cookie="userId=828";  //单个
document.cookie="userName=aaaa"; 

document.cookie="userId=111; userName=aaaa"; //多个

获取：

var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split(";"); 
var userId;
//遍历cookie数组，处理每个cookie对
for(var i=0;i<arrCookie.length;i++){
    var arr=arrCookie[i].split("=");
    //找到名称为userId的cookie，并返回它的值
    if("userId"==arr[0]){
        userId=arr[1];
        break;
    }
} 

设置时间

//其中GMT_String是以GMT格式表示的时间字符串，这条语句就是将userId这个cookie设置为GMT_String表示的过期时间，超过这个时间，cookie将消失，不可访问
document.cookie="userId=828; expiress=GMT_String"; 

例子：设置10天后过期

//获取当前时间
var date=new Date();
var expiresDays=10;
//将date设置为10天以后的时间
date.setTime(date.getTime()+expiresDays*24*3600*1000);
//将userId和userName两个cookie设置为10天后过期
document.cookie="userId=828; userName=hulk; expires="+date.toGMTString(); 

删除
将其过期时间设定为一个过去的时间

//获取当前时间
var date=new Date();
//将date设置为过去的时间
date.setTime(date.getTime()-10000);
//将userId这个cookie删除
document.cookie="userId=828; expires="+date.toGMTString(); 

设置路径

document.cookie="userId=320; path=/shop";
//表示当前cookie仅能在shop目录下使用。 

sessionStorage

判断浏览器是否支持

if(window.sessionStorage){
    console.log('This browser supports sessionStorage');
}else{
    console.log('This browser does NOT support sessionStorage');
}

设置

sessionStorage.setItem('key', 'value');
sessionStorage.lastname="Smith";

获取

var data = sessionStorage.getItem('key');
sessionStorage.lastname

删除

 sessionStorage.removeItem('key');

清空所有数据

sessionStorage.clear();

获取长度

sessionStorage.length

localStorage

该用法与sessionStorage用法相同

浏览器兼容性

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	3.5	8	10.5	4
sessionStorage	5	2	8	10.5	4