本地存儲，三兄弟的異同（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字節(不一樣瀏覽器有所不一樣)