客户端存储

cookie

会话存储：

特定域绑定，设置cookie后，他会与请求一起发送到创建它的域

一些限制：每个域不超过20个cookie，浏览器不超过300个cookie,每个cookie不超过4096个字节……

构成：

1）名称：部分大小写

2）值：存在cookie中的字符串值，这个值必须经过URL编码

3）域：发送到这个域的请求都会带上cookie

4）路径：请求路径包含这个路径才会把cookie发送到服务器

5）过期时间：表示合适删除cookie的时间戳，默认情况下浏览器会话结束就会删除所有cookie,不过也可以自己设置一个过期时间，这样即使关闭浏览器，时间到了cookie也会被删除

6）安全标志：只有使用功能SSL安全链接的情况下才会把cookie发送到服务器

Set-Cookie:name=value,expires=Mon,22-Jan-07 07:10:24 GMT;domains=.wrox.com;secure

cookie叫做name的cookie,Mon,22-Jan-07 07:10:24过期，.wrox.com及其他子域携带cookie,SSL连接才随请求发送到服务器

实际上发送给服务器的只有cookie的名/值对

document.cookie  // 获取页面中所有有效的cookie字符串

document.cookie=encodeURIComponent("name") + "=" + encodeURIComponent("Nicholas") + "; domain=.wrox.com;secure"  // 设置cookie

不要在cookie中存储重要或敏感信息

web Storage

只能存储字符串，所以非字符串需要转为字符串，最常用 JSON.stringify()

sessionStorage

跨会话存储机制：

同源才能访问；同页面（window.open,this.$router.push改变的页面都还可以访问），但是如果重新输入一个地址打开的窗口就不能够访问了

数据只会存储到会话关闭，在页面关闭消失

不受页面刷新影响

只能由最初的存储数据页面使用，在多页面应用程序中应用有限

存储大小是由限制的

增删改查的api

// 获取
sessionStorage.getItem(key)
sessionStorage.key
// 添加设置、修改
sessionStorage.setItem(key,value)
sesisonStoreage.key=value
// 删除
sessionStorage.removeItem(key)
delete sessionStorage.key
sessionStorage.clear()

localStorage

永久存储机制：

同源才能访问，不同窗口也可以访问跨，但是跨域和跨浏览器不能访问到

设置手动清除才清除

不受页面刷新影响

存储大小相对来说比较大

增删改查的api

// 获取
localStorage.getItem(key)
localStorage.key
// 添加设置、修改
localStorage.setItem(key,value)
localStorage.key=value
// 删除
localStorage.removeItem(key)
delete localStorage.key
localStorage.clear()

存储事件storage,每次使用setItem delete removeItem clear 都会触发这个事件

window.addEventListener("storage",e=>{
console.log("存储变化对应的域:", e.domain,"被设置或删除的值:",e.key,
"键被设置的新值 删除为null", e.newValue, 键变化之前的值 e.oldValue)
})

三者对比

不同点

cookie

1 存储数量据小
2 在设置的期限到达之前有效，及时关闭浏览器*
3 在同一浏览器的所有同源窗口共享 必须是同一浏览器（前提是同源），即使页面不同也可以拿到；在不同浏览器中即使同源，同一页面也不能共享cookie
4 cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递

sessionStorage
1 存储数据量较大
2 当前浏览器关闭之前有效
3 只在当前浏览器的当前会话共享 ，即使是同一浏览器，不同会话也不能共享cookie
4 sessionStorage不会自动把数据发送给服务器，仅在本地保存

localStorage
1 存储数据量大
2 除非自己删除，否则一直有效，即使浏览器关闭
3 在当前浏览器所有同源窗口共享*
4 localStorage不会自动把数据发送给服务器，仅在本地保存