cookie，localStorage，sessionStorage

cookie

cookie是一种数据，存储在电脑上的文本文件中，一般存储空间最多4k，它以名/值对的形式存储，如：name=小明。

js中可以使用document.cookie来创建，读取，删除cookie。

创建：

1 document.cookie="name=xiaozhu";

　　可以使用expires参数设置cookie的过期时间，默认情况下，cookie在浏览器关闭时自动删除。

document.cookie="name=xiaozhu;expires=Thu, 18 Dec 2018 12:00:00 GMT;path=/";

　　使用path告诉浏览器cookie的路径。默认情况下cookie是属于当前页面的。

 document.cookie="name=xiaozhu;expires=Thu, 18 Dec 2018 12:00:00 GMT;path=/";

读取：

 var x=  document.cookie;

修改：

　　修改cookie类似于创建，

 document.cookie="name=xiaoming;expires=Thu, 18 Dec 2018 12:00:00 GMT;path=/";

删除：

　　删除cookie，只需要设置cookie的expires参数为以前的时间即可

document.cookie="name=xiaozhu;expires=Thu, 18 Dec 2000 12:00:00 GMT;path=/";

localStorage

localStorage是H5加入的新特性，主要用作本地本地储存使用，它的存储空间比cookie大，在5M左右，它只支持string类型的存储，并且存储后保留时间没有限制，永久储存，除非主动删除它。

它提供了setItem，getItem，removeItem，clear方法，分别用出来储存，读取，移除，清除所有

 1 　　　　localStorage.setItem("name","xiaozhu");      // 设置
 2        var x=localStorage.getItem("name");          // 读取
 3        console.log(x)   // xiaozhu
 4 
 5        localStorage.setItem("name","xiaoming");     // 修改
 6        var x=localStorage.getItem("name");
 7         console.log(x)  // xiaoming
 8 
 9         localStorage.removeItem("name");            // 移除
10        var x=localStorage.getItem("name");
11         console.log(x)    // null
12 
13        localStorage.setItem("name","xiaozhu");      // 设置
14         localStorage.clear();                        // 清除
15         var x=localStorage.getItem("name");
16         console.log(x)    // null 

一般我们将json存入localStorage中时，因为localStorage只能存储字符串，所有可以使用JSON.stringify()方法将JSON转换成JSON字符串，再写入localStorage中。读取之后再用JSON.parse()方法将JSON字符创转换成JSON对象。

sessionStorage

sessionStorage和localStorage用法相同，具有相同setItem，getItem，removeItem，clear来创建，读取和删除，但是与localStorage不同的是，它的存储时间并不是永久的，只是会话级的，也就是说，sessionStorage在浏览器关闭的时候就会销毁。

区别

　　cookie与sessionStorage，localStorage，cookie数据始终在同源的http请求中携带（即使不需要），会在浏览器和服务器之间来回传递。sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

因为自己开发过程中用到了本地缓存，所以就做了个总结，有不对的地方欢迎指出共同进步。