Javascript怎樣使用SessionStorage和LocalStorage
作為Web開發(fā)人員，在 Web瀏覽器中存儲數(shù)據(jù)以改善用戶體驗和提升Web應(yīng)用程序性能是非常常見的。在大多數(shù)情況下，可供我們使用就是LocalStorage和SessionStorage。
本文中，我們將會從安全性和用戶體驗兩個方面對SessionStorage和LocalStorage進(jìn)行評估。然后我們將討論如何根據(jù)您的要求挑選合適使用的對象。
SessionStorage和LocalStorage簡介在HTML5之前，開發(fā)人員一般是通過使用Cookie在客戶端保存一些簡單的信息的。在HTML5發(fā)布后，提供了一種新的客戶端本地保存數(shù)據(jù)的方法，那就是Web Storage，它也被分為：LocalStorage和SessionStorage，它允許通過JavaScript在Web瀏覽器中以鍵值對的形式保存數(shù)據(jù)。而相比Cookie有如下優(yōu)點：
擁有更大的存儲容量，Cookie是4k，Web Storage為5M。 操作數(shù)據(jù)相比Cookie更簡單。 不會隨著每次請求發(fā)送到服務(wù)端。如何使用SessionStorage和LocalStorage您可以使用瀏覽器window對象訪問SessionStorage和LocalStorage。請看下面的示例：
sessionStorage = window.sessionStoragelocalStorage = window.localStorage
以下是這兩種存儲類型可用的功能。
//存儲一個item storage.setItem(’name’, ’Alice’) storage.setItem(’age’, ’5’)//讀取一個item storage.getItem(’name’) // returns 'Alice'//get存儲對象長度 storage.length // returns 2//通過索引get對應(yīng)的key名 storage.key(0) // returns 'name'//移除一個item storage.removeItem(’name’)//清空存儲對象 storage.clear()LocalStorage與SessionStorage的區(qū)別
LocalStorage和SessionStorage之間的主要區(qū)別在于瀏覽器窗口和選項卡之間的數(shù)據(jù)共享方式不同。
LocalStorage可跨瀏覽器窗口和選項卡間共享。就是說如果在多個選項卡和窗口中打開了一個應(yīng)用程序，而一旦在其中一個選項卡或窗口中更新了LocalStorage，則在所有其他選項卡和窗口中都會看到更新后的LocalStorage數(shù)據(jù)。
但是，SessionStorage數(shù)據(jù)獨立于其他選項卡和窗口。如果同時打開了兩個選項卡，其中一個更新了SessionStorage，則在其他選項卡和窗口中不會反映出來。舉個例子：假設(shè)用戶想要通過兩個瀏覽器選項卡預(yù)訂兩個酒店房間。由于這是單獨的會話數(shù)據(jù)，因此使用SessionStorage是酒店預(yù)訂應(yīng)用程序的理想選擇。
安全性說明Web Storage的存儲對象是獨立于域名的，也就是說不同站點下的Web應(yīng)用有著自己獨立的存儲對象，互相間是無法訪問的，在這一點上SessionStorage和LocalStorage是相同的。
舉個例子：部署在abc.com上的Web應(yīng)用無法訪問xyz.com的Web Storage存儲對象。
同樣，對于子域名也是一樣，盡管www.grapecity.com.cn和gcdn.grapecity.com.cn 同屬 grapecity.com.cn 主域下，但它們相互不能訪問對方的存儲對象。
另外，不僅對子域名相互獨立，對于針對使用http和https協(xié)議間也是不同的，所以這一點也需要注意。
應(yīng)對跨站點腳本攻擊（XSS）首先，什么是XSS攻擊？
XSS是將一段惡意腳本添加到網(wǎng)頁上，通過瀏覽器加載而執(zhí)行從而達(dá)到攻擊并獲得隱私信息的目的。
LocalStorage和SessionStorage在這一點上都容易受到XSS攻擊。攻擊者可直接向存儲對象添加惡意腳本并執(zhí)行。因此不太建議把一些敏感的個人信息存儲在Web Storage中，例如：
用戶名密碼 信用卡資料 JsonWeb令牌 API密鑰 SessionID如何避免攻擊？ 盡量不要用同一域名部署多個Web應(yīng)用程序，如果有這種場景請盡量使用子域名部署應(yīng)用，因為一旦多應(yīng)用使用統(tǒng)一的域名，這將會對所有的用戶共享Web存儲對象。 一旦將數(shù)據(jù)存儲在LocalStorage中，開發(fā)人員在用戶將其清除之前無法對其進(jìn)行任何控制。如果希望在會話結(jié)束后自動刪除數(shù)據(jù)，請使用SessionStorage。 從WebStorage讀取出的數(shù)據(jù)都要驗證、編碼和轉(zhuǎn)義。 在保存進(jìn)WebStorage前將數(shù)據(jù)加密。對用戶體驗的提升雖然一些敏感數(shù)據(jù)要避免使用，但我們依然可以通過WebStorage改善Web應(yīng)用程序的用戶體驗
例如，用戶在填寫表單，但因為一些原因用戶關(guān)閉了選項卡/窗口，但表單LocalStorage實現(xiàn)了自動保存用戶表單的功能，這樣當(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>
因為我們的場景是待用戶再次打開時，自動恢復(fù)之前填寫的內(nèi)容，所以這里不能使用SessionStorage作為存儲對象，因為它會在窗口關(guān)閉時自動清除。
使用存儲對象進(jìn)行瀏覽器緩存一般情況下，我們可以緩存一些應(yīng)用數(shù)據(jù)，以便后面供Web應(yīng)用使用。例如，你的Web應(yīng)用需要加載所有國家的貨幣數(shù)據(jù)，在不使用WebStorage情況下，每次加載獲取列表時都需要發(fā)出HTTP請求來獲取，而將數(shù)據(jù)保存在LocalStorage后，可直接獲取數(shù)據(jù)。
由于LocalStorage不會過期的特性，用戶在任何使用打開頁面時都可以使用存儲對象中的內(nèi)容，而如果用戶想刪除LocalStorage數(shù)據(jù)也很簡單，清除瀏覽器緩存內(nèi)容即可。
監(jiān)聽LocalStorage變化LocalStorage是一個可以用作本地持久化存儲的對象，我們可以向其中添加數(shù)據(jù)存儲，同樣它在用戶操作的情況下發(fā)生變化時，我們也需要能監(jiān)聽到，當(dāng)它發(fā)生變化時，會觸發(fā)storage事件，我們可以在window上監(jiān)聽到這個事件，從而完成一些邏輯操作。
window.addEventListener(’storage’, () => { ...}); window.onstorage = () => { ...};總結(jié)與結(jié)論
您可以根據(jù)您的使用情況選擇LocalStorage與SessionStorage。如果您的應(yīng)用程序需要在多個瀏覽器窗口和標(biāo)簽頁中共享數(shù)據(jù)，請使用LocalStorage，否則請使用SessionStorage。
SessionStorage和LocalStorage都容易受到XSS攻擊。因此，請避免將敏感數(shù)據(jù)存儲在瀏覽器存儲中。
最后，雖然WebStorage很好用，還是建議你在如下的情況下使用：
沒有敏感數(shù)據(jù) 數(shù)據(jù)尺寸小于 5MB 高性能并不重要以上就是Javascript怎樣使用SessionStorage和LocalStorage的詳細(xì)內(nèi)容，更多關(guān)于Javascript的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. Python多線程操作之互斥鎖、遞歸鎖、信號量、事件實例詳解2. idea設(shè)置自動導(dǎo)入依賴的方法步驟3. XML入門的常見問題(一)4. Django程序的優(yōu)化技巧5. Jsp中request的3個基礎(chǔ)實踐6. Python常用GUI框架原理解析匯總7. Django ORM實現(xiàn)按天獲取數(shù)據(jù)去重求和例子8. 怎樣才能用js生成xmldom對象，并且在firefox中也實現(xiàn)xml數(shù)據(jù)島？9. IntelliJ IDEA 統(tǒng)一設(shè)置編碼為utf-8編碼的實現(xiàn)10. jsp EL表達(dá)式詳解
網(wǎng)公網(wǎng)安備