本地存储的几种方式cookie、localStorage、sessionStorage

本地存储：

一、cookie

1、cookie特点

cookie前端用来存储内容区域 ;后端也可以操作前端cookie;后端也可以直接种植(设置)cookie到前端（不怕被刷新，在浏览器里存的 ，在控制台Application下可找到）会随着请求发送给后端
(document.cookie可获取大部分cookie的内容)

1.大小限制：一般浏览器允许在同一个域下最多8kb。而localStorage会存储5mb左右[1 MB=1024 KB]
2.兼容性：cookie几乎可以兼容所有浏览器，但是localStorage是H5新增的，低版本的浏览器不支持
3.稳定性：cookie可以设置过期时间，但是一般情况下没有到达时间之前cookie都被清除了(比如你的各种安全卫士在清除缓存垃圾的时候，就有可能把cookie清除，浏览器里的清除浏览记录也可以清除cookie，无痕浏模式不会设置cookie)
4.比较早的技术：最初是为了记录http的状态，提高访问速度。cookie是服务器"种植"在客户端的key-value形式文本文件。但同时客户端也能操作cookie。

2、封装一个获取cookie的方法

（第一个图是正则匹配演示，第二个图是封装一个获取cookie的方法）

3、封装一个设置cookie的方法

用法：setCookie(‘你好’,‘666’,‘2021-01-06’)

4、封装一个设置cookie的方法

特点：
大小：cookie的大小限制在4k。每个域名下cookie的个数现在在20个。
在客户端请求服务器端和服务器响应时，cookie始终被携带在http请求中，即使不需要(造成流量浪费)。这也是限制cookie大小的原因。
客户端可以通过document.cookie操作cookie，并不安全。
cookie可以设置过期时间、路径、域和httpOnly等字段。如果设置了过期时间，cookie会保存在硬盘里，知道到了设定的过期时间才会失效。若未设置过期时间，在浏览器窗口关闭时，cookie就失效了。路径和域两个字段限制了cookie的作用范围。httpOnly设置为true，则js不能通过document.cookie操作cookie。

5、删除cookie

只要让expires过期日期失效（这个cookie已经过期了）那么浏览器会自动删除这个cookie

二、localStorage（常用）

localStorage存储的内容，若不主动清除，永远存在，只能前端操作，后端操作不了（但是localStorage是H5新增的，低版本的浏览器不支持）不会随着请求发给后端。

1、设置、获取、清除

localStorage.setItem(key,value); // 设置数据(当设置的时候value会默认的用toString转换一下)
在存储的时候，如果value是一个引用值，最好先拿JSON.stringify转成字符串在存储，当获取的时候那JSON.parse在转换成对象就可以了
localStorage.getItem(key); // 获取数据
localStorage.removeItem(key); // 清除本地存储中的某一个数据
localStorage.clear(); // 清除全部(不建议使用，万一有其他人设置)

它也是采用key-value的形式存储数据，但是它与cookie有很大的区别
特点：
对比着来，localStorage能保存更大的数据，标准浏览器是5Mb。
localStorage保存在客户端，不随着请求发送给服务器，避免了流量的浪费。
客户端可以通过：setItem、getItem方法访问localStorage。
并且，localStorage没有过期时间，如果不手动清除，数据就永远不会过期，一直保存在浏览器当中。
存储的信息在同一域中是共享的。

三、sessionStorage的API（用法）等于localStorage

与localStorage不同的是，sessionStorage并不持久化，在窗口关闭那一刻，sessionStorage会被清除。
存储的信息是会话级别的，同域也是不能共享的。关闭当前标签页，sessionStorage即失效。

四、session(附加)

上面提到了cookie，顺带提一下session（这是一个后端存储，也就是后端的cookie）。客户端第一次访问服务器，服务器种植一个cookie，保存唯一的sessionId。后面客户端再次访问，会读取此sessionId，随即能在服务端读取到此id保存的会话对象。
特点：

session是基于cookie的，由于session在客户端不可被修改，相对于cookie来说安全，所以可存放一些重要数据。
数据保存在服务器端，客户端通过sessionId，读取到相对应的数据。