本地存储，三兄弟的异同（localStorage、sessionStorage、cookie）

答应我，十二月不准垂头丧气哦，显矮

共同点

localStorage和sessionStorage和cookie共同点

---

• 同域（同源策略）限制：同源策略：请求与响应的 协议、域名、端口都相同 则时同源，否则为 跨源/跨域
• 存储的内容都会转为字符串格式
• 都有存储大小限制

localStorage和sessionStorage共同点

---

• API相同
• 存储大小限制一样基本类似
• 无个数限制

不同点

localStorage

---

• 没有有效期，除非删除，否则一直存在
• 同域下页面共享
• 支持 storage 事件（在某些复杂情况下，如果多个页面都需要访问本地存储的数据，就需要在存储区域的内容发生改变时，能够通知相关的页面);

// torage 事件
setTimeout(function(){
   window.localStorage.setItem('a', 2)
 },1000)
window.addEventListener("storage", function(e) {
   console.log(e)
});

sessionStorage

---

• 浏览器关闭，自动销毁
• 页面私有
• 不支持 storage 事件

cookie

---

• 浏览器也会在每次请求的时候主动组织所有域下的cookie到请求头 cookie 中，发送给服务器端
• 浏览器会主动存储接收到的 set-cookie 头信息的值
• 可以设置 http-only 属性为 true 来禁止客户端代码（js）修改该值
• 可以设置有效期 (默认浏览器关闭自动销毁)(不同浏览器有所不同)
• 同域下个数有限制，最好不要超过50个(不同浏览器有所不同)
• 单个cookie内容大小有限制，最好不要超过4000字节(不同浏览器有所不同)