亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Javascript怎樣使用SessionStorage和LocalStorage

 更新時(shí)間：2021年04月26日 10:15:42   作者：葡萄城技術(shù)團(tuán)隊(duì)  
這篇文章主要介紹了Javascript怎樣使用SessionStorage和LocalStorage，對(duì)web存儲(chǔ)數(shù)據(jù)感興趣的同學(xué)，可以參考下

前言

作為Web開發(fā)人員，在 Web瀏覽器中存儲(chǔ)數(shù)據(jù)以改善用戶體驗(yàn)和提升Web應(yīng)用程序性能是非常常見的。在大多數(shù)情況下，可供我們使用就是LocalStorage和SessionStorage。

本文中，我們將會(huì)從安全性和用戶體驗(yàn)兩個(gè)方面對(duì)SessionStorage和LocalStorage進(jìn)行評(píng)估。然后我們將討論如何根據(jù)您的要求挑選合適使用的對(duì)象。

SessionStorage和LocalStorage簡(jiǎn)介

在HTML5之前，開發(fā)人員一般是通過使用Cookie在客戶端保存一些簡(jiǎn)單的信息的。在HTML5發(fā)布后，提供了一種新的客戶端本地保存數(shù)據(jù)的方法，那就是Web Storage，它也被分為：LocalStorage和SessionStorage，它允許通過JavaScript在Web瀏覽器中以鍵值對(duì)的形式保存數(shù)據(jù)。而相比Cookie有如下優(yōu)點(diǎn)：

  • 擁有更大的存儲(chǔ)容量，Cookie是4k，Web Storage為5M。
  • 操作數(shù)據(jù)相比Cookie更簡(jiǎn)單。
  • 不會(huì)隨著每次請(qǐng)求發(fā)送到服務(wù)端。

如何使用SessionStorage和LocalStorage

您可以使用瀏覽器window對(duì)象訪問SessionStorage和LocalStorage。請(qǐng)看下面的示例：

sessionStorage = window.sessionStorage
localStorage = window.localStorage

以下是這兩種存儲(chǔ)類型可用的功能。

//存儲(chǔ)一個(gè)item
  storage.setItem('name', 'Alice')
  storage.setItem('age', '5')
//讀取一個(gè)item
  storage.getItem('name') // returns "Alice"
//get存儲(chǔ)對(duì)象長(zhǎng)度
  storage.length // returns 2
//通過索引get對(duì)應(yīng)的key名
  storage.key(0) // returns "name"
//移除一個(gè)item
  storage.removeItem('name')
//清空存儲(chǔ)對(duì)象
  storage.clear()

LocalStorage與SessionStorage的區(qū)別

LocalStorage和SessionStorage之間的主要區(qū)別在于瀏覽器窗口和選項(xiàng)卡之間的數(shù)據(jù)共享方式不同。

LocalStorage可跨瀏覽器窗口和選項(xiàng)卡間共享。就是說如果在多個(gè)選項(xiàng)卡和窗口中打開了一個(gè)應(yīng)用程序，而一旦在其中一個(gè)選項(xiàng)卡或窗口中更新了LocalStorage，則在所有其他選項(xiàng)卡和窗口中都會(huì)看到更新后的LocalStorage數(shù)據(jù)。

但是，SessionStorage數(shù)據(jù)獨(dú)立于其他選項(xiàng)卡和窗口。如果同時(shí)打開了兩個(gè)選項(xiàng)卡，其中一個(gè)更新了SessionStorage，則在其他選項(xiàng)卡和窗口中不會(huì)反映出來。舉個(gè)例子：假設(shè)用戶想要通過兩個(gè)瀏覽器選項(xiàng)卡預(yù)訂兩個(gè)酒店房間。由于這是單獨(dú)的會(huì)話數(shù)據(jù)，因此使用SessionStorage是酒店預(yù)訂應(yīng)用程序的理想選擇。

安全性說明

Web Storage的存儲(chǔ)對(duì)象是獨(dú)立于域名的，也就是說不同站點(diǎn)下的Web應(yīng)用有著自己獨(dú)立的存儲(chǔ)對(duì)象，互相間是無法訪問的，在這一點(diǎn)上SessionStorage和LocalStorage是相同的。

舉個(gè)例子：部署在abc.com上的Web應(yīng)用無法訪問xyz.com的Web Storage存儲(chǔ)對(duì)象。

同樣，對(duì)于子域名也是一樣，盡管www.grapecity.com.cn和gcdn.grapecity.com.cn 同屬 grapecity.com.cn 主域下，但它們相互不能訪問對(duì)方的存儲(chǔ)對(duì)象。

另外，不僅對(duì)子域名相互獨(dú)立，對(duì)于針對(duì)使用http和https協(xié)議間也是不同的，所以這一點(diǎn)也需要注意。

應(yīng)對(duì)跨站點(diǎn)腳本攻擊（XSS）

首先，什么是XSS攻擊？

XSS是將一段惡意腳本添加到網(wǎng)頁上，通過瀏覽器加載而執(zhí)行從而達(dá)到攻擊并獲得隱私信息的目的。

LocalStorage和SessionStorage在這一點(diǎn)上都容易受到XSS攻擊。攻擊者可直接向存儲(chǔ)對(duì)象添加惡意腳本并執(zhí)行。因此不太建議把一些敏感的個(gè)人信息存儲(chǔ)在Web Storage中，例如：

  • 用戶名密碼
  • 信用卡資料
  • JsonWeb令牌
  • API密鑰
  • SessionID

如何避免攻擊？

  • 盡量不要用同一域名部署多個(gè)Web應(yīng)用程序，如果有這種場(chǎng)景請(qǐng)盡量使用子域名部署應(yīng)用，因?yàn)橐坏┒鄳?yīng)用使用統(tǒng)一的域名，這將會(huì)對(duì)所有的用戶共享Web存儲(chǔ)對(duì)象。
  • 一旦將數(shù)據(jù)存儲(chǔ)在LocalStorage中，開發(fā)人員在用戶將其清除之前無法對(duì)其進(jìn)行任何控制。如果希望在會(huì)話結(jié)束后自動(dòng)刪除數(shù)據(jù)，請(qǐng)使用SessionStorage。
  • 從WebStorage讀取出的數(shù)據(jù)都要驗(yàn)證、編碼和轉(zhuǎn)義。
  • 在保存進(jìn)WebStorage前將數(shù)據(jù)加密。

對(duì)用戶體驗(yàn)的提升

雖然一些敏感數(shù)據(jù)要避免使用，但我們依然可以通過WebStorage改善Web應(yīng)用程序的用戶體驗(yàn)

例如，用戶在填寫表單，但因?yàn)橐恍┰蛴脩絷P(guān)閉了選項(xiàng)卡/窗口，但表單LocalStorage實(shí)現(xiàn)了自動(dòng)保存用戶表單的功能，這樣當(dāng)用戶再次打開，用戶之前填寫的信息會(huì)自動(dòng)被恢復(fù)。

<!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>

因?yàn)槲覀兊膱?chǎng)景是待用戶再次打開時(shí)，自動(dòng)恢復(fù)之前填寫的內(nèi)容，所以這里不能使用SessionStorage作為存儲(chǔ)對(duì)象，因?yàn)樗鼤?huì)在窗口關(guān)閉時(shí)自動(dòng)清除。

使用存儲(chǔ)對(duì)象進(jìn)行瀏覽器緩存

一般情況下，我們可以緩存一些應(yīng)用數(shù)據(jù)，以便后面供Web應(yīng)用使用。例如，你的Web應(yīng)用需要加載所有國(guó)家的貨幣數(shù)據(jù)，在不使用WebStorage情況下，每次加載獲取列表時(shí)都需要發(fā)出HTTP請(qǐng)求來獲取，而將數(shù)據(jù)保存在LocalStorage后，可直接獲取數(shù)據(jù)。

由于LocalStorage不會(huì)過期的特性，用戶在任何使用打開頁面時(shí)都可以使用存儲(chǔ)對(duì)象中的內(nèi)容，而如果用戶想刪除LocalStorage數(shù)據(jù)也很簡(jiǎn)單，清除瀏覽器緩存內(nèi)容即可。

監(jiān)聽LocalStorage變化

LocalStorage是一個(gè)可以用作本地持久化存儲(chǔ)的對(duì)象，我們可以向其中添加數(shù)據(jù)存儲(chǔ)，同樣它在用戶操作的情況下發(fā)生變化時(shí)，我們也需要能監(jiān)聽到，當(dāng)它發(fā)生變化時(shí)，會(huì)觸發(fā)storage事件，我們可以在window上監(jiān)聽到這個(gè)事件，從而完成一些邏輯操作。

window.addEventListener('storage', () => {
  ...
});
 
window.onstorage = () => {
  ...
};

總結(jié)與結(jié)論

您可以根據(jù)您的使用情況選擇LocalStorage與SessionStorage。如果您的應(yīng)用程序需要在多個(gè)瀏覽器窗口和標(biāo)簽頁中共享數(shù)據(jù)，請(qǐng)使用LocalStorage，否則請(qǐng)使用SessionStorage。

SessionStorage和LocalStorage都容易受到XSS攻擊。因此，請(qǐng)避免將敏感數(shù)據(jù)存儲(chǔ)在瀏覽器存儲(chǔ)中。

最后，雖然WebStorage很好用，還是建議你在如下的情況下使用：

  • 沒有敏感數(shù)據(jù)
  • 數(shù)據(jù)尺寸小于 5MB
  • 高性能并不重要　　

以上就是Javascript怎樣使用SessionStorage和LocalStorage的詳細(xì)內(nèi)容，更多關(guān)于Javascript的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論