sessionStorage和localStorage

H5前端存儲 localStorage 和 sessionStorage

簡述

曾在項目中屢次使用過localStorage和sessionStorage來存放token，但一直未深刻了解。近期項目壓力極小，就看了不少文章研究了一下，並結合項目經驗作個總結。

session 和 sessionStorage，Java 和 JavaScript

在完全弄懂session,cookie,token中，我已經講過session。在我學習sessionStorage的過程當中，看到不少文章的評論說：sessionStorage不是存在服務器的嗎？在這裏，我說明一下，session是存放於服務器的一個狀態集合，而sessionStorage是H5新引入的一個客戶端存儲數據的空間，與session並沒有關係，你們千萬不要搞混了。就像Java和JavaScript，只是名字長得像而已。localStorage和sessionStorage之間有些異同，能夠進行比較

用法

用法很簡單，sessionStorage和localStorage的api同樣。

// 保存數據到sessionStorage
sessionStorage.setItem("key", "value");

// 從sessionStorage獲取數據
const data = sessionStorage.getItem("key");

// 從sessionStorage刪除保存的數據
sessionStorage.removeItem("key");

// 從sessionStorage刪除全部保存的數據
sessionStorage.clear();

// 從sessionStorage獲取所有數據
const allData=sessionStorage.valueOf();

異同

相同點

• localStorage和sessionStorage同樣都是用來存儲客戶端臨時信息的對象。以chrome爲例
  
• 他們均只能存儲字符串類型的對象
• 存儲大小都爲5M
• 都遵照同源策略

不一樣點

• sessionStorage有期限，當窗口或瀏覽器關閉時就會被銷燬。localStorage無限期，關閉瀏覽器後仍存在，除非用戶手動在瀏覽器UI層刪除
• localStorage 在同源的不一樣窗口下可共享，在不一樣瀏覽器中不可共享
• sessionStorage 在同源的不一樣窗口下不可共享。注意這裏的不一樣窗口是指瀏覽器另起一窗口，並非指頁面路由跳轉

小結

在我作過的項目中，storage通常用來存儲少許的用戶信息和token，建議你們不要把什麼數據都放在 localStorage 和 sessionStorage中，畢竟前端的安全性過低。只要打開控制檯就能夠任意的修改localStorage 和 sessionStorage的數據。重要的信息最好仍是放在後臺。

謝謝

最後 若是你們有疑惑能夠隨便找一個小說網站在控制檯試一試，很快即可掌握。
本文若有錯誤，歡迎指出。