轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者，
原文出處：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="https://www.cnblogs.com/powertoolsteam/archive/2020/10/15/getValue(this)" onchange="save(this)"><br>
</form>
<script>
localStorage= window.localStorage
function save(input) {
localStorage.setItem(input.id, input.value)
}
document.getElementById("fname").value=https://www.cnblogs.com/powertoolsteam/archive/2020/10/15/localStorage.getItem("fname")
document.getElementById("lname").value=https://www.cnblogs.com/powertoolsteam/archive/2020/10/15/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
- 高性能并不重要
如果有什么問題或補充，歡迎通過評論區留言告訴我，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/172640.html
標籤：其他