沐鳴平台首頁_SessionStorage、LocalStorage詳解

作為Web開發人員,在 Web瀏覽器中存儲數據以改善用戶體驗和提升Web應用程序性能是非常常見的。在大多數情況下,可供我們使用就是LocalStorage和SessionStorage。

本文中,我們將會從安全性和用戶體驗兩個方面對SessionStorage和LocalStorage進行評估。然後我們將討論如何根據您的要求挑選合適使用的對象。

SessionStorage和LocalStorage簡介

在html5之前,開發人員一般是通過使用Cookie在客戶端保存一些簡單的信息的。在html5發布后,提供了一種新的客戶端本地保存數據的方法,那就是Web Storage,它也被分為:LocalStorage和SessionStorage,它允許通過JavaScript在Web瀏覽器中以鍵值對的形式保存數據。而相比Cookie有如下優點:

  1. 擁有更大的存儲容量,Cookie是4k,Web Storage為5M。
  2. 操作數據相比Cookie更簡單。
  3. 不會隨着每次請求發送到服務端。

如何使用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
  • 高性能並不重要

轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

原文出處:https://blog.bitsrc.io/sessionstorage-and-localstorage-a-ux-security-comparison-a05c486413e0

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/9716