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