浏览器缓存Cookie,localStorage和sessionStorage

1、Cookie
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。支持所有现代浏览器。

 var time=new Date("2019 10-01 12:00:00");
    document.cookie="user=654321;expires=Tue Oct 01 2019 12:00:00 GMT+0800;path=/";
    document.cookie="ID=abctkj123ihg789sfbd;expires=Tue Oct 01 2019 12:00:00 GMT+0800;path=/";
    var json={};
    var data=document.cookie.split(";")[0].split("=");
    json[data[0]]=data[1];
    console.log(json);

cookie一般存储用户名密码相关信息，或者过期日期。
2、localStorage 和 sessionStorage
localStorage：硬盘存储 （ 本地缓存 类似cookie 一直都在）

/*
     * 本地缓存
     *setItem()  设置缓存
     * getItem()
     * length 有多少条
     * key  通过索引获取对应条数的键
     * clear()  清除缓存
     * removeItem 清除指定
     * */
localStorage.setItem("user","12345");
     localStorage.setItem("ID","12345");
     var data=localStorage.getItem("user");
     console.log(data);
     console.log(localStorage.length);
     var name=localStorage.key(0);
     console.log(name);
     //localStorage.clear()
     localStorage.removeItem("user")

localStorage可以用来统计页面访问次数。

sessionStorage：浏览器端缓存（浏览器关闭之后没有了）

sessionStorage.setItem("user", "12345");
     sessionStorage.setItem("ID", "12345");
     var data = sessionStorage.getItem("user");
     console.log(data);
     console.log(sessionStorage.length);
     var name = sessionStorage.key(0);
     console.log(name);
     //sessionStorage.clear()
     sessionStorage.removeItem("user");

sessionStorage可以用来统计当前页面元素的点击次数。

它们之间的区别以及共同点：
共同点：都是保存在浏览器端，并且是同源的（URL的协议、端口、主机名是相同的，只要有一个不同就属于不同源）
区别：
1、cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而session
Storage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以
限制cookie只属于某个路径下。

2、存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合
保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以
达到5M或更大

3、数据有效期不同，sessionStorage仅仅在当前浏览器窗口关闭之前有效；localStorage始终有效，窗口或者
浏览器关闭之后也一直保存，因此作用持久数据；cookie，只在设置cookie过期时间之前有效，即使窗口关闭或者浏
览器关闭。

4、作用域不同：sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面，localStorage在所有的同源窗
口中是共享的，cookie也是在所有同源的窗口中共享的。