摘要:存儲(chǔ)客戶端存儲(chǔ)有幾種方式,存儲(chǔ)就是其中一種。瀏覽器兼容性存儲(chǔ)有效期永久性。實(shí)際上,的數(shù)據(jù)是寫入磁盤中,每次讀取數(shù)據(jù)時(shí),實(shí)際上是從硬盤驅(qū)動(dòng)器上讀取這些字節(jié)。所以不要在客戶端存儲(chǔ)敏感信息,比如密碼或信用卡信息。
WEB存儲(chǔ)
客戶端存儲(chǔ)有幾種方式,WEB存儲(chǔ)就是其中一種。最初作為H5的一部分被定義成API形式,后來被剝離出來作為獨(dú)立的標(biāo)準(zhǔn)。所描述的API包含localStorage對(duì)象和sessionStorage對(duì)象,這兩個(gè)對(duì)象實(shí)際都代表同一個(gè)Storage對(duì)象,是持久化關(guān)聯(lián)數(shù)組。是名值對(duì)的映射表。
localStorage和sessionStorage區(qū)別在于存儲(chǔ)的有效期和作用域的不同:數(shù)據(jù)可以存儲(chǔ)多長(zhǎng)時(shí)間以及誰(shuí)擁有數(shù)據(jù)的訪問權(quán)。
localStorage
永久性。除非WEB應(yīng)用刻意刪除存儲(chǔ)的數(shù)據(jù),或者用戶通過設(shè)置瀏覽器配置來刪除,否則數(shù)據(jù)會(huì)一直保留在用戶電腦上,永不過期。實(shí)際上,localStorage的數(shù)據(jù)是寫入磁盤中,每次讀取數(shù)據(jù)時(shí),實(shí)際上是從硬盤驅(qū)動(dòng)器上讀取這些字節(jié)。
sessionStorage
窗口或標(biāo)簽頁(yè)被永久關(guān)閉,則通過sessionStorage存儲(chǔ)的數(shù)據(jù)也被刪除。
都是限定在文檔源級(jí)別。(非同源文檔間無(wú)法共享)
localStorage
同源的文檔間共享相同的localStorage數(shù)據(jù)。它們之間可以互相讀取甚至覆蓋對(duì)方數(shù)據(jù)。非同源的文檔間互相都不能讀取或覆蓋對(duì)方的數(shù)據(jù)(即使運(yùn)行的腳本是來自同一臺(tái)第三方服務(wù)器也不行)。
受瀏覽器供應(yīng)商限制。不能訪問上次存儲(chǔ)在不同瀏覽器的數(shù)據(jù)。
sessionStorage
限定在窗口中。如果同源的文檔渲染在不同的瀏覽器標(biāo)簽頁(yè)中,那么它們的數(shù)據(jù)也無(wú)法共享?!敬翱谥傅氖琼敿?jí)窗口。若一個(gè)標(biāo)簽頁(yè)中有兩個(gè)
一個(gè)標(biāo)簽頁(yè)中的腳本是無(wú)法讀取或覆蓋由另一個(gè)標(biāo)簽頁(yè)腳本寫入的數(shù)據(jù)。
【補(bǔ)充:文檔流是通過協(xié)議、主機(jī)名以及端口來決定的。】
localStorage與sessionStorage均適用。
localStorage.setItem("x",1);//以"x"的名字存儲(chǔ)一個(gè)數(shù)值 localStorage.x = 1;//直接向 Web 存儲(chǔ)對(duì)象添加鍵/值對(duì) localStorage.getItem("x");//獲取數(shù)值 localStorage.x;//直接從 Web 存儲(chǔ)對(duì)象中檢索鍵/值對(duì) localStorage.removeItem("x");//刪除“x”項(xiàng)。 //removeItem是唯一通用的能刪除單個(gè)名值對(duì)的方式。(因?yàn)镮E8不支持delete操作符) localStorage.clear();//全部刪除。唯一能刪除存儲(chǔ)對(duì)象中所有名值對(duì)的方式 //將一個(gè)數(shù)組存儲(chǔ)為字符串 var myArray = new Array("First Name", "Last Name", "Email Address"); localStorage.formData = JSON.stringify(myArray); //檢索數(shù)組的字符串版本并將它轉(zhuǎn)換成一個(gè)可用的 JavaScript 數(shù)組 var myArray = JSON.parse(localStorage.formData);存儲(chǔ)事件
無(wú)論什么時(shí)候存儲(chǔ)在localStorage或sessionStorage的數(shù)據(jù)發(fā)送改變,瀏覽器都會(huì)在其它對(duì)該數(shù)據(jù)可見的窗口對(duì)象上觸發(fā)存儲(chǔ)事件。
【對(duì)于localStorage,如果瀏覽器兩個(gè)標(biāo)簽頁(yè)都打開了來自同源的頁(yè)面,其中一個(gè)頁(yè)面存儲(chǔ)了數(shù)據(jù),另外一個(gè)標(biāo)簽頁(yè)就會(huì)接收到一個(gè)存儲(chǔ)事件?!?br>【對(duì)于sessionStorage,只有當(dāng)相互牽連的窗口的時(shí)候才會(huì)觸發(fā)存儲(chǔ)事件】
【只有當(dāng)存儲(chǔ)數(shù)據(jù)真正發(fā)生改變的時(shí)候才會(huì)觸發(fā)存儲(chǔ)事件】
與存儲(chǔ)事件相關(guān)的事件對(duì)象屬性
key 被設(shè)置或移除的項(xiàng)的名字或者鍵名。如果調(diào)用clear(),則該屬性值為null
newValue 保存該項(xiàng)的新值。若調(diào)用removeItem(),該屬性值為null
oldValue 改變或刪除該項(xiàng)前,保存該項(xiàng)原先的值。插入一個(gè)新項(xiàng)時(shí),該屬性值為null
storageArea 好比是目標(biāo)Window對(duì)象上的localStorage屬性或sessionStorage屬性
url 觸發(fā)該存儲(chǔ)變化腳本所在文檔的URL
【localStorage和存儲(chǔ)事件都是采用廣播機(jī)制,瀏覽器會(huì)對(duì)目前正在訪問同樣站點(diǎn)的所有窗口發(fā)送消息。】
安全性【翻譯的比較爛。可以去看官方解釋】
DNS spoofing attacks
針對(duì)DNS欺騙攻擊,頁(yè)面可以使用TLS,來確保他們是來自同一個(gè)域從而允許訪問。
Cross-directory attacks
共享一個(gè)主機(jī)名的不同用戶,都共享同一個(gè)local storage object。在共享主機(jī)時(shí)需要謹(jǐn)慎使用。因?yàn)槠渌蚕碛脩艨梢宰x取并且覆蓋數(shù)據(jù)?!綪S: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
主要風(fēng)險(xiǎn)在于惡意網(wǎng)站可以從其他域讀取信息并且對(duì)其他域?qū)懭霅阂鈹?shù)據(jù)。讓第三方站點(diǎn)讀取其他域的數(shù)據(jù)會(huì)造成信息泄露(information leakage)。讓第三方站點(diǎn)寫其他域存儲(chǔ)的數(shù)據(jù)也會(huì)造成信息欺騙(information spoofing)
【W(wǎng)eb 存儲(chǔ)并不比 cookies 安全。所以不要在客戶端存儲(chǔ)敏感信息,比如密碼或信用卡信息。】
localStorage優(yōu)化由于localStorage的數(shù)據(jù)是被寫入磁盤中,每次讀取數(shù)據(jù)是從硬盤驅(qū)動(dòng)器中讀取,速度會(huì)很慢。除此之外,從單一localStorage鍵值中讀取的數(shù)據(jù)量對(duì)速度是沒有影響, 而讀取次數(shù)越多,速度越慢。
最佳策略:使用盡可能少的鍵值,存取盡可能多的數(shù)據(jù)。
參考內(nèi)容:《js權(quán)威指南》
使用 HTML5 Web 存儲(chǔ)實(shí)現(xiàn)離線工作
《Web性能實(shí)踐日志》
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/79398.html
摘要:是一種經(jīng)常出現(xiàn)在應(yīng)用程序中的計(jì)算機(jī)安全漏洞,是由于應(yīng)用程序?qū)τ脩舻妮斎脒^濾不足而產(chǎn)生的。常見的攻擊有三種反射型型存儲(chǔ)型。但是作為開發(fā)人員依然要了解基本知識(shí)于細(xì)節(jié)處避免制造漏洞。 showImg(https://segmentfault.com/img/bVbjJDk); 編者說:作為JS系工程師接觸最多的漏洞我想就是 XSS 漏洞了,然鵝并不是所有的同學(xué)對(duì)其都有一個(gè)清晰的認(rèn)識(shí)。今天我們...
摘要:存儲(chǔ)之初探的發(fā)布和定稿為前端界帶來巨大的變化,新增的和特性給業(yè)務(wù)帶來了更多可能性,讓用戶體驗(yàn)擁有了更可能的豐富。只讀返回一個(gè)整數(shù),表示存儲(chǔ)在對(duì)象中的數(shù)據(jù)項(xiàng)數(shù)量。會(huì)在過期時(shí)間之后銷毀。安全性方面,中一般不建議存儲(chǔ)敏感信息。 Web存儲(chǔ)之LocalStorage初探 HTML5的發(fā)布和定稿為前端界帶來巨大的變化,新增的API和特性給業(yè)務(wù)帶來了更多可能性,讓用戶體驗(yàn)擁有了更可能的豐富。 · ...
摘要:淺談前端存儲(chǔ)前言應(yīng)用允許使用瀏覽器提供的實(shí)現(xiàn)將數(shù)據(jù)存儲(chǔ)到用戶的電腦上,這種客戶端存儲(chǔ)相當(dāng)于賦予了瀏覽器記憶功能。鍵被更改之前的值限制對(duì)于和的存儲(chǔ)限制因?yàn)g覽器而異。最初是在客戶端用于存儲(chǔ)會(huì)話信息的。 淺談前端存儲(chǔ) 前言 web應(yīng)用允許使用瀏覽器提供的API實(shí)現(xiàn)將數(shù)據(jù)存儲(chǔ)到用戶的電腦上,這種客戶端存儲(chǔ)相當(dāng)于賦予了Web瀏覽器記憶功能。 客戶端存儲(chǔ)遵循同源策略,因此不同站點(diǎn)的頁(yè)面是無(wú)法相互讀...
閱讀 1112·2021-10-08 10:04
閱讀 3555·2021-08-05 10:01
閱讀 2313·2019-08-30 11:04
閱讀 1822·2019-08-29 15:29
閱讀 886·2019-08-29 15:12
閱讀 1705·2019-08-26 12:11
閱讀 3148·2019-08-26 11:33
閱讀 1184·2019-08-26 10:23