浏览器的本地存储

浏览器端包括三种本地存储机制，分别为cookie、localStorage、sessionStroage。在浏览器端保存数据的好处就是再次访问浏览器该页面时可以直接从浏览器端读取数据，不用向服务器发送请求。

cookie

1.什么是cookie
cookie是指存储在用户本地终端上的数据，同时它是与具体的web页面或者站点相关的。cookie数据会自动在web浏览器和服务器之间传输，也就是说HTTP请求发送时，会把保存在该请求域名下的所有cookie值发送给web服务器，因此服务器端脚本是可以读写在客户端的cookie的操作。常用于客户端和服务端通信。
2.cookie的注意事项
A.不同的服务器存放的cookie位置不同，不能通用
B.cookie的存储是按域名的形式区分的
C.cookie的数据可以设置名字
D.一个域名下存放的cookie的个数是有限的
E.每个cookie存放的内容大小也有限制，一个浏览器能创建的 Cookie 数量最多为 300 个，并且每个不能超过 4KB，每个 Web 站点能设置的 Cookie 总数不能超过 20 个 。
3.cookie的常用方式
A.创建cookie
document.cookie = ‘username=wei’（可读可写）

    function setCookie(key,value,t){
    	var oDate = new Date();
    	oDate.setDate(oDate.getDate()+t); 
        document.cookie = key+'='+encodeURI(value)+';expires='+oDate.toGMTString();//存储方式
    }

B.读取cookie

    function getCookie(key){
    	var arr1 = document.cookie.split('; ');
    	for(var i=0;i

C.删除cookie

    function removeCookie(key){
        setCookie(key,'',-1);
    }

localStorage与sessionStorage

1.什么是localStorage与sessionStorage
Html5新加入的特性，主要用来做本地存储，解决cookie存储空间不足的问题.sessionStorage与localStorage的唯一区别就是localStorage是永久存储，除非主动删除，而sessionStorage是当会话结束时键值对就会被清空
2.使用方法（二者相似，以localStorage为例）
A.清空方法和数据数量

    localStorage.clear();  //清空
    localStorage.length;   //数据数量

B.存储和修改数据

    localStorage.setItem("name","str");  //name若存在即为修改，否则为添加  
    localStorage.name = "str";

注意，如果想存储对象类型的数据，需要先用JSON.stringify()将其转成字符串再存储
(stringify是将对象转成字符串，但是json必须是严格模式，既key必须是字符串且必须是双引号；parse是将字符串转成对象），但是低版本ie是不支持的，可以到json.org上下载一个json2.js用来支持低版本ie浏览器

C.读取数据

localStorage.getItem("name");  
localStorage.name
localStorage.key(i)  //读取第i条数据，可以配合循环遍历（l

注意，如果存储的是对象类型的数据，需要先用JSON.parse()将其转成js对象再操作

D.删除和检查是否存在某数据

    localStorage.removeItem("name"); 
    localStorage.hasOwnProperty("name");

cookie、localStorage、sessionStorage的区别

1.存储大小
cookie：每个域名存储量比较小（各浏览器不同，大致 4K ）；所有域名的存储量有限制（各浏览器不同，大致 4K ）；有个数限制（各浏览器不同）；会随请求发送到服务器
localStorage：永久存储；单个域名存储量比较大（推荐5MB ，各浏览器不同）；总体数量无限制
sessionStorage：只在 session 内有效；存储量更大（推荐没有限制，但是实际上各浏览器也不同）
2.有效时间
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭（默认临时存储）
注：设置cookie过期时间方式：

       document.cookie = 'usename=wei;expires='+时间;//这个时间必须是字符串
    oDate.setDate(oDate.getDate()+5);

3.数据与服务器之间的交互方式
cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。