前端的三种缓存技术cookie、localStorage、sessionStorage

cookie

cookie是浏览器常用的缓存技术，它保存的是JSON字符串，它一般设置有有效期，当达到达到有效期时，存储的数据就会从存储中消失。举一个例子：比如我们在浏览器登录虎牙直播，下次同样在这台计算机上打开这个网站，它会记住我们的登录信息，不用再次登录，但是过了一个月以后你发现你再次登录时显示未登录的状态，这就是cookie有限期到了。

因为它是很早就存在的技术，在JS脚本中系统未直接给我们提供缓存数据的增删改查等方法。这些都需要我们前端工程师自己去封装这些技术。

简单创建一个cookie:

 用户<input type="text" value="" id="user">
    密码<input type="text" value="" id="pwd">
    <button onclick="cj()">创建一个cookie</button>
    <script>
        var user=document.getElementById("user")
        var pwd=document.getElementById("pwd")
        function cj(){
            //我们设置一个cookie有效时间

           var dt = new Date().getTime()
           //设置有效时间为七天
           var cookiedt=new Date(dt+60*60*24*7)
           //创建cookie
           document.cookie=`user${user.value}&pwd${pwd.value};expires=${cookiedt}`
        }
    </script>

我们在页面输入信息后，点击创建就可以在调试器中看到我们创建的这个cookie，

 除了JS脚本创建cookie外，我们还可以通过 Set-Cookie 头字段给浏览器给当前网站设置 cookie。

Set-Cookie: name=zs

除了expires有限期外，他还有一些属性需要知道：

HttpOnly：设置后，只能通过 HTTP 响应报文的 Set-Cookie 来新增或更新 cookie ，客户端无法通过脚本的方式来读写 cookie。

Max-Age：cookie 的有效时间长度，单位为秒。通过设置小于等于 0 的数字，可以让一个 cookie 失效。如果 Max-Age 和 Expires 同时存在，以 Max-Age 为准。 Expires使用的时间格式的字符串。

Path:设置 cookie 的路径作用域。

 cookie的修改和删除我就不演示了，大家可以自己锻炼锻炼自己的js水平，封装函数操作cookie数据。

localStorage和sessionStorage

两者都是H5新出的缓存技术，他们代表同一个Storage对象；系统提供了一系列方法来操作缓存数据，非常的方便。

让我们看一下localStorage存储的数据：

 很明显与cookie存储的JSON字符串相比，storage对象采用键值对存储。

简单介绍一下localStorage和sessionStorage的API：

setItem()：将对应的名字和值传递进去，可以实现数据存储；

举个例：

window.localStorage.setItem("user","张三")

getItem()：将名字传递进去，可以获取对应的值；

removeItem()：将名字传递进去，可以删除对应的值；

clear()：删除所有的缓存值，不需要参数；

length：属性，获取键值对总数；

key()：传入位置数，获取存储的值的名字；

简单对比一下localStorage和sessionStorage：localStorage是永久性保存数据，除非你自己删除；

sessionStorage:关闭浏览器数据就自动全部删除。

总结：

localStorage、sessionStorage、cookie三者的区别

（1）存储大小

cookie数据大小不能超过4k ；

sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；

（2）有效时间

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

sessionStorage 数据在当前浏览器窗口关闭后自动删除；

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；

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

cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；

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

（4）作用域

localStorage的作用域限制在文档源的；

localStorage同源的文档之间可以相互访问和修改相同名称的数据；

localStorage受浏览器厂商的限制，chrome下存储的数据，360浏览器下不可访问； 会得到‘Invalid Date’；

sessionStorage在localStorage的同源策略基础之上，还有更严格的限制：

他还被限制在窗口中，意思是同一个窗口或标签页的不同页面之间可以共享sessionStorage；

但是不同的窗口或标签页之间不能共享sessionStorage，即便他们是同一个页面地址；

这里的窗口是顶级窗口，如果里面有多个iframe，他们之间共享sessionStorage；