浏览器存储（cookie、localStorage、sessionStorage）记录

三者的区别

	作用	大小	是否会发送给浏览器	值的类型	存储时间
cookie	1. 存储用户信息，获取数据需要与服务器建立连接。2.可存储的数据有限，且依赖于服务器，无需请求服务器的数据尽量不要存放在cookie中，以免影响页面性能	4096字节+（每条4k）	附加在请求头中发送	“menu=[{%22path%22:%22/home%22%2C%22…}]; (此处有空格) token=[{0E…f4b}]”	可设置
localStorage	1.存储客户端的信息	5M+	否	String	不过期（可设置过期时间）
sessionStorage	1.存储客户端的信息	5M+	否	当前页面有效，刷新不丢失

相关API

• cookie

// 设置cookie 的完整格式：document.cookie="key=value[; expires=date][; domain=domain][; path=path][; secure]"

 /*{
* 　　expires: 7, // cookie有效期，单位天；默认值：会话cookie，关闭浏览器cookie失效。
* 　　path: '/', // cookie影响到的路径；值为'/'，表示设置cookie在整个域中可用；默认值：创建cookie的页面路径。只有路径相匹配cookie才能被读取到
* 　　domain: 'example.com', // 定义cookie有效的域。默认值：创建cookie的页面域。浏览器读取cookie的时候只有当cookie的domain和浏览器当前的域名匹配才能读取到，用于cookie 共享。
* 　　secure: false, // 定义cookie安全性，默认值：false，设置为true，则cookie在http中是无效的，cookie的传输需要使用安全协议（https）。
* 	eg：a.example.com和b.example.com如果他们想要共享cookie那么cookie的domain需要设置为domain=.example.com，path路径需要设置为path=/。这样之后两个域名都能同时访问到cookie了。
* }
*/
var t = new Date( +(new Date()) + 1000 * 120 );
document.cookie = `name=monsterooo; expires=${t.toLocaleTimeString()}; domain=.example.com; path=/`;

// 获取到的cookie 获取当中的一个时，应当先以“; ”分割，再以“=” 分割获取相应cookie名字的值,获取结果===》
"menu=[{%22path%22:%22/home%22%2C%22...}]; token=0E...f4b; tagList=[{%22path%22:%22/%22%2C%22name%22:%22...}]"

• localStorage & sessionStorage 继承自 Storage。有相同的API设置和获取数据：

• clear 清空存储中的所有本地存储数据

• getItem 接受一个参数key，获取对应key的本地存储

• key 接受一个整数索引，返回对应本地存储中索引的键

• removeItem 接受一个参数key，删除对应本地存储的key。注意：设置cookie时如果设置了path属性或secure属性，删除的时候要带着这些属性，否则无法成功删除cookie。

• setItem 接受两个参数，key和value，如果不存在则添加，存在则更新。

说明

1.localStorage的生命周期是永久性的。localStorage存储的数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据。如果 想设置失效时间，需自行封装。
2.sessionStorage 的生命周期是在浏览器关闭前。
特性：

• 关闭浏览器sessionStorage 失效；
• 页面刷新不会消除数据；
• 只有在当前页面打开的链接，才可以访sessionStorage的数据，使用window.open打开页面和改变localtion.href方式都可以获 取到sessionStorage内部的数据;