SessionStorage、LocalStorage詳解
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://blog.bitsrc.io/sessionstorage-and-localstorage-a-ux-security-comparison-a05c486413e0
作為Web開發人員，在 Web瀏覽器中儲存資料以改善使用者體驗和提升Web應用程式效能是非常常見的。在大多數情況下，可供我們使用就是LocalStorage和SessionStorage。
本文中，我們將會從安全性和使用者體驗兩個方面對SessionStorage和LocalStorage進行評估。然後我們將討論如何根據您的要求挑選合適使用的物件。
SessionStorage和LocalStorage簡介
在HTML5之前，開發人員一般是通過使用Cookie在客戶端儲存一些簡單的資訊的。在HTML5釋出後，提供了一種新的客戶端本地儲存資料的方法，那就是Web Storage，它也被分為：LocalStorage和SessionStorage，它允許通過JavaScript在Web瀏覽器中以鍵值對的形式儲存資料。而相比Cookie有如下優點：
- 擁有更大的儲存容量，Cookie是4k，Web Storage為5M。
- 操作資料相比Cookie更簡單。
- 不會隨著每次請求傳送到服務端。
如何使用SessionStorage和LocalStorage
您可以使用瀏覽器window物件訪問SessionStorage和LocalStorage。請看下面的示例：
sessionStorage = window.sessionStorage localStorage = window.localStorage
以下是這兩種儲存型別可用的功能。
//儲存一個item
storage.setItem('name', 'Alice')
storage.setItem('age', '5')
//讀取一個item
storage.getItem('name') // returns "Alice"
//get儲存物件長度
storage.length // returns 2
//通過索引get對應的key名
storage.key(0) // returns "name"
//移除一個item
storage.removeItem('name')
//清空儲存物件
storage.clear()
LocalStorage與SessionStorage的區別
LocalStorage和SessionStorage之間的主要區別在於瀏覽器視窗和選項卡之間的資料共享方式不同。
LocalStorage可跨瀏覽器視窗和選項卡間共享。就是說如果在多個選項卡和視窗中打開了一個應用程式，而一旦在其中一個選項卡或視窗中更新了LocalStorage，則在所有其他選項卡和視窗中都會看到更新後的LocalStorage資料。
但是，SessionStorage資料獨立於其他選項卡和視窗。如果同時打開了兩個選項卡，其中一個更新了SessionStorage，則在其他選項卡和視窗中不會反映出來。舉個例子：假設使用者想要通過兩個瀏覽器選項卡預訂兩個酒店房間。由於這是單獨的會話資料，因此使用SessionStorage是酒店預訂應用程式的理想選擇。
安全性說明
Web Storage的儲存物件是獨立於域名的，也就是說不同站點下的Web應用有著自己獨立的儲存物件，互相間是無法訪問的，在這一點上SessionStorage和LocalStorage是相同的。
舉個例子：部署在abc.com上的Web應用無法訪問xyz.com的Web Storage儲存物件。
同樣，對於子域名也是一樣，儘管www.grapecity.com.cn和gcdn.grapecity.com.cn 同屬 grapecity.com.cn 主域下，但它們相互不能訪問對方的儲存物件。
另外，不僅對子域名相互獨立，對於針對使用http和https協議間也是不同的，所以這一點也需要注意。
應對跨站點指令碼攻擊（XSS）
首先，什麼是XSS攻擊？
XSS是將一段惡意指令碼新增到網頁上，通過瀏覽器載入而執行從而達到攻擊並獲得隱私資訊的目的。
LocalStorage和SessionStorage在這一點上都容易受到XSS攻擊。攻擊者可直接向儲存物件新增惡意指令碼並執行。因此不太建議把一些敏感的個人資訊儲存在Web Storage中，例如：
- 使用者名稱密碼
- 信用卡資料
- JsonWeb令牌
- API金鑰
- SessionID
如何避免攻擊？
- 儘量不要用同一域名部署多個Web應用程式，如果有這種場景請儘量使用子域名部署應用，因為一旦多應用使用統一的域名，這將會對所有的使用者共享Web儲存物件。
- 一旦將資料儲存在LocalStorage中，開發人員在使用者將其清除之前無法對其進行任何控制。如果希望在會話結束後自動刪除資料，請使用SessionStorage。
- 從WebStorage讀取出的資料都要驗證、編碼和轉義。
- 在儲存進WebStorage前將資料加密。
對使用者體驗的提升
雖然一些敏感資料要避免使用，但我們依然可以通過WebStorage改善Web應用程式的使用者體驗
例如，使用者在填寫表單，但因為一些原因使用者關閉了選項卡/視窗，但表單LocalStorage實現了自動儲存使用者表單的功能，這樣當用戶再次開啟，使用者之前填寫的資訊會自動被恢復。
<!DOCTYPE html>
<html>
<body>
<h2>表單示例</h2>
<form>
<label for="lname">姓氏:</label><br>
<input type="text" id="lname" name="lname" value="" onchange="save(this)">
<label for="fname">名字:</label><br>
<input type="text" id="fname" name="fname" value="getValue(this)" onchange="save(this)"><br>
</form>
<script>
localStorage= window.localStorage
function save(input) {
localStorage.setItem(input.id, input.value)
}
document.getElementById("fname").value=localStorage.getItem("fname")
document.getElementById("lname").value=localStorage.getItem("lname")
</script>
</body>
</html>
因為我們的場景是待使用者再次開啟時，自動恢復之前填寫的內容，所以這裡不能使用SessionStorage作為儲存物件，因為它會在視窗關閉時自動清除。
使用儲存物件進行瀏覽器快取
一般情況下，我們可以快取一些應用資料，以便後面供Web應用使用。例如，你的Web應用需要載入所有國家的貨幣資料，在不使用WebStorage情況下，每次載入獲取列表時都需要發出HTTP請求來獲取，而將資料儲存在LocalStorage後，可直接獲取資料。
由於LocalStorage不會過期的特性，使用者在任何使用開啟頁面時都可以使用儲存物件中的內容，而如果使用者想刪除LocalStorage資料也很簡單，清除瀏覽器快取內容即可。
監聽LocalStorage變化
LocalStorage是一個可以用作本地持久化儲存的物件，我們可以向其中新增資料儲存，同樣它在使用者操作的情況下發生變化時，我們也需要能監聽到，當它發生變化時，會觸發storage事件，我們可以在window上監聽到這個事件，從而完成一些邏輯操作。
window.addEventListener('storage', () => {
...
});
window.onstorage = () => {
...
};
總結與結論
您可以根據您的使用情況選擇LocalStorage與SessionStorage。如果您的應用程式需要在多個瀏覽器視窗和標籤頁中共享資料，請使用LocalStorage，否則請使用SessionStorage。
SessionStorage和LocalStorage都容易受到XSS攻擊。因此，請避免將敏感資料儲存在瀏覽器儲存中。
最後，雖然WebStorage很好用，還是建議你在如下的情況下使用：
- 沒有敏感資料
- 資料尺寸小於 5MB
- 高效能並不重要
如果有什麼問題或補充，歡迎通過評論區留言告訴我。