Javascript怎樣使用SessionStorage和LocalStorage
前言
作為Web開發人員，在 Web瀏覽器中儲存資料以改善使用者體驗和提升Web應用程式效能是非常常見的。在大多數情況下，可供我們使用就是LocalStorage和SessionStorage。
本文中，我們將會從安全性和使用者體驗兩個方面對SessionStorage和LocalStorage進行評估。然後我們將討論如何根據您的要求挑選合適使用的物件。
SessionStorage和LocalStbisrGQfSjorage簡介
在HTML5之前，開發人員一般是通過使用Cookie在客戶端儲存一些簡單的資訊的。在HTML5釋出後，提供了一種新的客戶端本地儲存資料的方法，那就是Web Storage，它也被分為：LocalStorage和SessionStorage，它允許通過
- 擁有更大的儲存容量，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'http://www.cppcns.com)
//讀取一個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之間的主要區別在於瀏覽器視窗和選項卡之間的資料共享方式不bisrGQfSj同。
LocalStorage可跨瀏覽器視窗和選項卡間共享。就是說如果在多個選項卡和視窗中打開了一程式設計客棧個應用程式，而一旦在其中一個選項卡或視窗中更新了LocalStorage，則在所有其他選項卡和視窗中都會看到更新後的LocalStorage資料。
但是，SessionStorage資料獨立於其他選項卡和視窗。如果同時打開了兩個選項卡，其中一個更新了SessionStorage，則在其他選項卡和視窗中不會反映出來。舉個例子：假設使用者想要通過兩個瀏覽器選項卡預訂兩個酒店房間。由於這是單獨的會話資料，因此使用SessionStorage是酒店預訂應用程式的理想選擇。
安全性說明
Web Storage的儲存物件是獨立於域名的，也就是說不同站點下的Web應用有著自己獨立的儲存物件，互相間是無法訪問的，在這一點上SessionStorage和LocalStorage是相同的。
舉個例子：部署在abc.com上的Web應用無法訪問xyz.c程式設計客棧om的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
- 高效能並不重要
以上就是javascript怎樣使用SessionStorage和LocalStorage的詳細內容，更多關於Javascript的資料請關注我們其它相關文章！