sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的。。



可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。

认识一下

sessionStorage、 localStorage 、 cookie都是在浏览器端存储的数据，其中 sessionStorage 的概念很特别，引入了一个“浏览器窗口”的概念。 sessionStorage 是在同源的同窗口（或 tab ）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后， sessionStorage 即被销毁。同时“独立”打开的不同窗口，即使是同一页面， sessionStorage 对象也是不同的 。

各浏览器允许的cookie

IE8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。

Firefox每个域名cookie限制为50个

Opera每个域名cookie限制为 30 个

Safari/WebKit貌似没有cookie限制。但是如果cookie很多，则会使header大小超过服务器的处理的限制，会导致错误发生。

不同浏览器间cookie总大小也不同：

Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。

Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。

Internet Explorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。

注：多字节字符计算为两个字节。在所有浏览器中，任何cookie大小超过限制都被忽略，且永远不会被设置。

sessionStorage、localStorage和cookie的区别

Cookie

1
2
3
4
5
6
7
每个域名存储量比较小（各浏览器不同，大致 4K ） 

所有域名的存储量有限制（各浏览器不同，大致 4K ） 

有个数限制（各浏览器不同） 

会随请求发送到服务器

LocalStorage

1
2
3
4
5
永久存储 

单个域名存储量比较大（推荐 5MB ，各浏览器不同） 

总体数量无限制

SessionStorage

1
2
3
只在 Session 内有效 

存储量更大（推荐没有限制，但是实际上各浏览器也不同）

概念理解

1
2
3
4
5
cookie:浏览器端存储数据，内存比较小，并且有条数限制，会被发往服务器端，用于验证用户身份等操作，被http协议携带；

sessionStorage:浏览器端存储数据，内存比较大，只存储在本地不发送到服务端，当本浏览器窗口被关闭，就会被删除；

LocalStorage:浏览器端存储数据，内存比较大，只存储在本地不发送到服务端，当本浏览器窗口被关闭，不会被删除。

头脑风暴的深度剖析

1
2
3
4
5
6
7
8
cookies：一小段文本信息，伴随着用户请求和页面在服务器和浏览器之间传递。
因HTTP协议是无状态的，对于一个浏览器发出的多次请求，web服务器无法区分是否来自同一个浏览器，
此时需要额外的数据用于维持会话

sessionStorage：用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，
会话结束数据随之销毁，它并非持久化的本地存储。 

localStorage：用于持久化的本地存储，除非主动删除数据，否则数据永远不会过期

cookies与web storage(session|localStorage)区别：

1
2
3
4
5
6
1、cookies大小受限，并且每次请求新页面时cookie都会被发送过去，无形中浪费了带宽；
需要前端自己封装setCookie，getCookie；
作用是与服务器进行交互。

2、web storage具备更大容量存储，拥有setItem，getItem，removeItem，Clear等方法；
作用是本地存储，避免数据在浏览器和服务器间不必要地来回传递

存储方式、存储大小，有效时间

cookie是网站为了标示用户身份而储存在用户本地Client Side上的数据（通常经过加密）。 cookie数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

存储大小： cookie数据大小不能超过4k。 sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

有效时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

当很多的cookie被设置，浏览器如何去响应。

除了Safari（可以设置全部cookie，不管数量多少），有两个方法：Least Recently Used方法：当Cookie已达到限额，自动踢除最老的Cookie，以使给最新的Cookie一些空间。Internet Explorer和Opera使用此方法。

Firefox很独特：虽然最后的设置的Cookie始终保留，但似乎随机决定哪些cookie被保留。似乎没有任何计划（建议：在Firefox中不要超过Cookie限制）。

设置cookie过期时间存储特殊字符的时候出问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//设置过期时间document.cookie="hhardyy=zhen;expires=时间";
//
//chrome不允许操作本地cookie
//firefox查看

var oDate=new Date();

oDate.toGMTString();//由于oDate是object，IE弹不出，所以要toGMTString()转换
oDate.setDate(oDate.getDate()+5);//五天以后过期

//内容编码存放，encodeURI
//编码
console.log(encodeURI("你好"));//弹出%E4%BD%A0%E5%A5%BD
//解码
console.log(decodeURI("%E4%BD%A0%E5%A5%BD"))//你好

document.cookie="hhardyy="+encodeURI('zhen\n黄炳圳')+";expires="+oDate;
document.cookie="age=18";
//浏览器关掉再打开之后，age没了，由于oDate是object，IE弹不出，所以要toGMTString()转换

document.cookie="age=18";
//alert(document.cookie);
//解码读取
alert(decodeURI(document.cookie));

封装操作cookie的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
document.cookie="hhardyy=zhen";
document.cookie="age=18";
//创建cookie
function setCookie(key,value,t){
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+t);
    document.cookie=key+'='+value+';expires='+oDate.toGMTString();
}
//删除cookie
function removeCookie(key){
    setCookie(key,'',-1);
}
//获取cookie
function getCookie(key){
    var arr1=document.cookie.split('; ');
    for(var i=0;i<arr1.length;i++){
    var arr2=arr1[i].split('=');
}
    if (arr2[0]==key) {
        return decodeURI(arr2[1]);
    }
}
setCookie('sex','男',10);
console.log(getCookie('hhardyy'));
removeCookie('hhardyy');
}