请描述一下 cookies，sessionStorage 和 localStorage 的区别

相同点：都存储在客户端
不同点：

1.存储大小

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

2.有效时间

• localStorage    存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
• sessionStorage  数据在当前浏览器窗口关闭后自动删除。
• cookie          设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

• cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

----------------------------------------------------------------------------------------------------------------------------------------

额外拓展【加分项】：Cookie的操作（有点小难度）防止面试官细问cookie的操作。

设置Cookie 

cookie的几个要素

cookie的内容：采用 key=value;key=value……存储，参数名自定义

cookie的过期时间：使用参数expires

cookie的路径：使用参数path，"/"表示这个网站的页面，不推荐!容易产生冲突

注意：形如“/pro/index.html”路径，在google浏览器正常，在IE浏览器得不到值 

cookie的表示方式示例

 

[javascript]  view plain  copy

 

1. var name = "jack";  
2. var pwd = "123";  
3. var now = new Date();  
4. now.setTime(now.getTime() +1 * 24 * 60 * 60 * 1000);//转毫秒  
5. var path = "/";//可以是具体的网页  
6. document.cookie = "name=" + name + ";expires=" + now.toUTCString() + ";path=" + path;//姓名  
7. document.cookie= "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码  

 

读取cookie

获取cookie内容

 

[html]  view plain  copy

 

1. vardata=document.cookie;//获取对应页面的cookie  

 

解析cookie

方式1：截取字符串

[javascript]  view plain  copy

 

1. function getKey(key) {  
2.     var data = document.cookie;  
3.     var findStr = key + "=";  
4.     //找到key的位置  
5.     var index = data.indexOf(findStr);  
6.     if (index == -1)  
7.         return null;  
8.     var subStr = data.substring(index +findStr.length);  
9.     var lastIndex = subStr.indexOf(";");  
10.     if (lastIndex == -1) {  
11.         return subStr;  
12.  } else {  
13.         return subStr.substring(0,lastIndex);  
14.  }  
15. }  

方式2：使用正则表达式+JSON

[javascript]  view plain  copy

 

1. function getKey(key) {  
2.     return JSON.parse("{\"" +document.cookie.replace(/;\s+/gim, "\",\"").replace(/=/gim, "\":\"") + "\"}")[key];  
3. }  

清除cookie

[javascript]  view plain  copy

 

1. var name = null;  
2. var pwd = null;  
3. var now = new Date();  
4. var path = "/";//可以是具体的网页  
5. document.cookie= "name=" + name + ";expires=" + now.toUTCString()+ ";path=" + path;//姓名  
6. document.cookie = "pwd=" + pwd + ";expires=" + now.toUTCString()+ ";path=" + path; //密码