Javascript怎樣使用SessionStorage和LocalStorage
作為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ā)人員一般是通過(guò)使用Cookie在客戶端保存一些簡(jiǎn)單的信息的。在HTML5發(fā)布后，提供了一種新的客戶端本地保存數(shù)據(jù)的方法，那就是Web Storage，它也被分為：LocalStorage和SessionStorage，它允許通過(guò)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ì)象訪問(wèn)SessionStorage和LocalStorage。請(qǐng)看下面的示例：
sessionStorage = window.sessionStoragelocalStorage = 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//通過(guò)索引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)卡間共享。就是說(shuō)如果在多個(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ì)反映出來(lái)。舉個(gè)例子：假設(shè)用戶想要通過(guò)兩個(gè)瀏覽器選項(xiàng)卡預(yù)訂兩個(gè)酒店房間。由于這是單獨(dú)的會(huì)話數(shù)據(jù)，因此使用SessionStorage是酒店預(yù)訂應(yīng)用程序的理想選擇。
安全性說(shuō)明Web Storage的存儲(chǔ)對(duì)象是獨(dú)立于域名的，也就是說(shuō)不同站點(diǎn)下的Web應(yīng)用有著自己獨(dú)立的存儲(chǔ)對(duì)象，互相間是無(wú)法訪問(wèn)的，在這一點(diǎn)上SessionStorage和LocalStorage是相同的。
舉個(gè)例子：部署在abc.com上的Web應(yīng)用無(wú)法訪問(wèn)xyz.com的Web Storage存儲(chǔ)對(duì)象。
同樣，對(duì)于子域名也是一樣，盡管www.grapecity.com.cn和gcdn.grapecity.com.cn 同屬 grapecity.com.cn 主域下，但它們相互不能訪問(wèn)對(duì)方的存儲(chǔ)對(duì)象。
另外，不僅對(duì)子域名相互獨(dú)立，對(duì)于針對(duì)使用http和https協(xié)議間也是不同的，所以這一點(diǎn)也需要注意。
應(yīng)對(duì)跨站點(diǎn)腳本攻擊（XSS）首先，什么是XSS攻擊？
XSS是將一段惡意腳本添加到網(wǎng)頁(yè)上，通過(guò)瀏覽器加載而執(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ā)人員在用戶將其清除之前無(wú)法對(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ù)要避免使用，但我們依然可以通過(guò)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' name='lname' value='' onchange='save(this)'> <label for='fname'>名字:</label><br> <input type='text' 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)求來(lái)獲取，而將數(shù)據(jù)保存在LocalStorage后，可直接獲取數(shù)據(jù)。
由于LocalStorage不會(huì)過(guò)期的特性，用戶在任何使用打開頁(yè)面時(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)簽頁(yè)中共享數(shù)據(jù)，請(qǐng)使用LocalStorage，否則請(qǐng)使用SessionStorage。
SessionStorage和LocalStorage都容易受到XSS攻擊。因此，請(qǐng)避免將敏感數(shù)據(jù)存儲(chǔ)在瀏覽器存儲(chǔ)中。
最后，雖然WebStorage很好用，還是建議你在如下的情況下使用：
沒(méi)有敏感數(shù)據(jù) 數(shù)據(jù)尺寸小于 5MB 高性能并不重要以上就是Javascript怎樣使用SessionStorage和LocalStorage的詳細(xì)內(nèi)容，更多關(guān)于Javascript的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. 關(guān)于WPF WriteableBitmap類直接操作像素點(diǎn)的問(wèn)題2. JavaScript前端中的偽類元素before和after使用詳解3. PHP JSAPI調(diào)支付API實(shí)現(xiàn)微信支付功能詳解4. asp取整數(shù)mod 有小數(shù)的就自動(dòng)加15. 源碼分析MinimalApi是如何在Swagger中展示6. ThinkPHP5實(shí)現(xiàn)JWT Token認(rèn)證的過(guò)程(親測(cè)可用)7. ASP基礎(chǔ)入門第一篇(ASP技術(shù)簡(jiǎn)介)8. 熊海CMS代碼審計(jì)漏洞分析9. 表單中Readonly和Disabled的區(qū)別詳解10. PHP laravel實(shí)現(xiàn)基本路由配置詳解
網(wǎng)公網(wǎng)安備