摘要:存儲客戶端存儲有幾種方式,存儲就是其中一種。瀏覽器兼容性存儲有效期永久性。實際上,的數據是寫入磁盤中,每次讀取數據時,實際上是從硬盤驅動器上讀取這些字節。所以不要在客戶端存儲敏感信息,比如密碼或信用卡信息。
WEB存儲
客戶端存儲有幾種方式,WEB存儲就是其中一種。最初作為H5的一部分被定義成API形式,后來被剝離出來作為獨立的標準。所描述的API包含localStorage對象和sessionStorage對象,這兩個對象實際都代表同一個Storage對象,是持久化關聯數組。是名值對的映射表。
localStorage和sessionStorage區別在于存儲的有效期和作用域的不同:數據可以存儲多長時間以及誰擁有數據的訪問權。
localStorage
永久性。除非WEB應用刻意刪除存儲的數據,或者用戶通過設置瀏覽器配置來刪除,否則數據會一直保留在用戶電腦上,永不過期。實際上,localStorage的數據是寫入磁盤中,每次讀取數據時,實際上是從硬盤驅動器上讀取這些字節。
sessionStorage
窗口或標簽頁被永久關閉,則通過sessionStorage存儲的數據也被刪除。
都是限定在文檔源級別。(非同源文檔間無法共享)
localStorage
同源的文檔間共享相同的localStorage數據。它們之間可以互相讀取甚至覆蓋對方數據。非同源的文檔間互相都不能讀取或覆蓋對方的數據(即使運行的腳本是來自同一臺第三方服務器也不行)。
受瀏覽器供應商限制。不能訪問上次存儲在不同瀏覽器的數據。
sessionStorage
限定在窗口中。如果同源的文檔渲染在不同的瀏覽器標簽頁中,那么它們的數據也無法共享。【窗口指的是頂級窗口。若一個標簽頁中有兩個
一個標簽頁中的腳本是無法讀取或覆蓋由另一個標簽頁腳本寫入的數據。
【補充:文檔流是通過協議、主機名以及端口來決定的。】
localStorage與sessionStorage均適用。
localStorage.setItem("x",1);//以"x"的名字存儲一個數值 localStorage.x = 1;//直接向 Web 存儲對象添加鍵/值對 localStorage.getItem("x");//獲取數值 localStorage.x;//直接從 Web 存儲對象中檢索鍵/值對 localStorage.removeItem("x");//刪除“x”項。 //removeItem是唯一通用的能刪除單個名值對的方式。(因為IE8不支持delete操作符) localStorage.clear();//全部刪除。唯一能刪除存儲對象中所有名值對的方式 //將一個數組存儲為字符串 var myArray = new Array("First Name", "Last Name", "Email Address"); localStorage.formData = JSON.stringify(myArray); //檢索數組的字符串版本并將它轉換成一個可用的 JavaScript 數組 var myArray = JSON.parse(localStorage.formData);存儲事件
無論什么時候存儲在localStorage或sessionStorage的數據發送改變,瀏覽器都會在其它對該數據可見的窗口對象上觸發存儲事件。
【對于localStorage,如果瀏覽器兩個標簽頁都打開了來自同源的頁面,其中一個頁面存儲了數據,另外一個標簽頁就會接收到一個存儲事件。】
【對于sessionStorage,只有當相互牽連的窗口的時候才會觸發存儲事件】
【只有當存儲數據真正發生改變的時候才會觸發存儲事件】
與存儲事件相關的事件對象屬性
key 被設置或移除的項的名字或者鍵名。如果調用clear(),則該屬性值為null
newValue 保存該項的新值。若調用removeItem(),該屬性值為null
oldValue 改變或刪除該項前,保存該項原先的值。插入一個新項時,該屬性值為null
storageArea 好比是目標Window對象上的localStorage屬性或sessionStorage屬性
url 觸發該存儲變化腳本所在文檔的URL
【localStorage和存儲事件都是采用廣播機制,瀏覽器會對目前正在訪問同樣站點的所有窗口發送消息。】
安全性【翻譯的比較爛。可以去看官方解釋】
DNS spoofing attacks
針對DNS欺騙攻擊,頁面可以使用TLS,來確保他們是來自同一個域從而允許訪問。
Cross-directory attacks
共享一個主機名的不同用戶,都共享同一個local storage object。在共享主機時需要謹慎使用。因為其他共享用戶可以讀取并且覆蓋數據。【PS:Even if a path-restriction feature was made available, the usual DOM scripting security model would make it trivial to bypass this protection and access the data from any path.】
Implementation risks
主要風險在于惡意網站可以從其他域讀取信息并且對其他域寫入惡意數據。讓第三方站點讀取其他域的數據會造成信息泄露(information leakage)。讓第三方站點寫其他域存儲的數據也會造成信息欺騙(information spoofing)
【Web 存儲并不比 cookies 安全。所以不要在客戶端存儲敏感信息,比如密碼或信用卡信息。】
localStorage優化由于localStorage的數據是被寫入磁盤中,每次讀取數據是從硬盤驅動器中讀取,速度會很慢。除此之外,從單一localStorage鍵值中讀取的數據量對速度是沒有影響, 而讀取次數越多,速度越慢。
最佳策略:使用盡可能少的鍵值,存取盡可能多的數據。
參考內容:《js權威指南》
使用 HTML5 Web 存儲實現離線工作
《Web性能實踐日志》
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79398.html
摘要:是一種經常出現在應用程序中的計算機安全漏洞,是由于應用程序對用戶的輸入過濾不足而產生的。常見的攻擊有三種反射型型存儲型。但是作為開發人員依然要了解基本知識于細節處避免制造漏洞。 showImg(https://segmentfault.com/img/bVbjJDk); 編者說:作為JS系工程師接觸最多的漏洞我想就是 XSS 漏洞了,然鵝并不是所有的同學對其都有一個清晰的認識。今天我們...
摘要:存儲之初探的發布和定稿為前端界帶來巨大的變化,新增的和特性給業務帶來了更多可能性,讓用戶體驗擁有了更可能的豐富。只讀返回一個整數,表示存儲在對象中的數據項數量。會在過期時間之后銷毀。安全性方面,中一般不建議存儲敏感信息。 Web存儲之LocalStorage初探 HTML5的發布和定稿為前端界帶來巨大的變化,新增的API和特性給業務帶來了更多可能性,讓用戶體驗擁有了更可能的豐富。 · ...
閱讀 1084·2021-10-08 10:04
閱讀 3523·2021-08-05 10:01
閱讀 2278·2019-08-30 11:04
閱讀 1794·2019-08-29 15:29
閱讀 836·2019-08-29 15:12
閱讀 1670·2019-08-26 12:11
閱讀 3115·2019-08-26 11:33
閱讀 1163·2019-08-26 10:23