html5 - web storage

發表於 更新於 分類於 閱讀次數： Disqus：

網頁應用程式以往都是透過後端在處理狀態、資料、數據，但是現在瀏覽器也提供的一個client端的簡易儲存方式，有一些應用程式不須要常常向後端交換數據的話，就可以透過local的儲存方式來做。
例如：todo-list、行事曆等等，這些都可以在client端做，而不需要向後端存數據，當然還有很多應用的方式，這邊就稍微介紹一下

sessoinStorage 與 localStorage 都是 client 端儲存資料的一種方式

localStorage 的儲存期限並沒有限制，透過 window.open 開啟新視窗，使用的都是同一份 localStorage，即使視窗全部關閉，只要資料不清掉，重新開啟之後資料仍舊存在

sessionStorage 則是關閉分頁就會被清掉，透過 window.open 開啟新視窗，使用的就是各自分頁自己的 sessionStorage，與其他分頁不相干，而關閉網頁再重新開啟，sessionStorage 也會隨即遺失；實際測試重新 reload 頁面，sessionStorage 仍舊會存在；要特別注意的是，window.open 出去的分頁，會將目前的 sessionStorage 資料複製一份出去給新分頁

如果希望每個分頁的資料在 window.open 都不一樣，可以在 window.open 之前先清掉，在 open，接著再重新給值，而頁面載入的時候，就需要判斷是否存在 sessionStorage，不存在就自動給一個新的值，範例 CodePan

它們都是 key-value-pair 的形式，所以要存取物件的話需要先經由序列化、反序列化處理
也因為它們都是儲存於 client 端的資訊，所以並不適合放置一些敏感性的資訊，像是個資、卡號等等

應用情境上，sessionStorage 因為生命週期僅存在於本次瀏覽，關閉後就結束，比較適合拿來放置一些臨時性的資料
localStorage 則可以考慮放置一些增進使用者體驗的東西，例如網頁下拉選單需要從後端取得資料，就可以利用 localStorage 來改善使用者體驗

操作語法兩者也很類似

1
2
3
4
5
6
7
8
9
10
11
// 將資料存到sessionStorage
sessionStorage.setItem("key", "value");

// 從sessionStorage取得之前存的資料
var data = sessionStorage.getItem("key");

// 從sessionStorage移除之前存的資料
sessionStorage.removeItem("key");

// 從sessionStorage移除之前存的所有資料
sessionStorage.clear();

更詳細的介紹請參考 MDN