cookie、localStorage、sessionStorage

cookie的存储方式

cookie是以字符串的形式存储，在字符串中以 key=value 的形式出现
每一个key=value是一条数据
多个数据之间 ； 分割，分号后有空格

'a=100; b=200; c=300;'

cookie的特点

1. 存储大小有限制，一般是 4 KB 左右
2. 数量有限制，一般是 50 条左右
3. 有时效性，也就是有过期时间，一般是 会话级别（session）（也就是浏览器关闭就过期了）
4. 有域名限制，也就是说谁设置的谁才能读取
5. cookie分路径存储，当前路径下设置的cookie，只能在当前路径下使用，其他路径不能使用（path:’/’）

使用方式

读取 cookie 的内容使用 document.cookie

const cookie = document.cookie
console.log(cookie) // 就能得到当前 cookie 的值

设置 cookie 的内容使用 document.cookie

// 设置一个时效性为会话级别的 cookie
document.cookie = 'a=100'

// 设置一个有过期时间的 cookie
document.cookie = 'b=200;expires="Thu, 18 Dec 2043 12:00:00 GMT";path="/"'

//或document.cookie = 'a=100;expires=' + new Date(+new Date() + 3 * 1000 - 8 * 3600 * 1000).toString() + ''
// 上面这个 cookie 数据会在 2043 年 12 月 18 日 12 点以后过期，过期后会自动消失

删除 cookie 的内容使用 document.cookie

// 因为 cookie 不能直接删除
// 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前
// 那么浏览器就会自动删除 cookie
document.cookie = 'b=200;expires="Thu, 18 Dec 2018 12:00:00 GMT";path="/";'

响应头请求头同时设置多个cookie用数组形式

res.writeHead(302,[
	["Set-Cookie","loginRet=true;"],
	["Set-Cookie",`username=${username};`],
	["Location","/files/pages/home.html"],
]);

本地存储

一、window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口（页面）下数据共享
以键值对的形式储存使用

储存数据

sessionStorage.setItem(key,value)

获取数据

sessionStorage.getItem(key)

删除数据

sessionStorage.removeItem(key)

删除所有数据

sessionStorage.clear()

window.localStorage

生命周期永久生效，除非手动删除否则关闭页面也存在

可以多窗口（页面）共享（仅限同一浏览器）

以键值对的形式储存使用

储存数据

localStorage.setItem(key,value)

获取数据

localStorage.getItem(key)

删除数据

localStorage.removeItem(key)

删除所有数据

localStorage.clear()

数据长度

localStorage.length