摘要:淺談前端存儲(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)的頁面是無法相互讀取對(duì)方存儲(chǔ)的數(shù)據(jù)
客戶端存儲(chǔ)有以下幾種形式:
Web存儲(chǔ)
cookie
IE User Data
離線Web應(yīng)用
web數(shù)據(jù)庫
文件系統(tǒng)API
Web Storgage實(shí)現(xiàn)了“web存儲(chǔ)”草案標(biāo)準(zhǔn)的瀏覽器在Window對(duì)象上定義了兩個(gè)屬性:localStorage和sessionStorage。
支持這兩個(gè)屬性的瀏覽器包括IE8+、Firefox3.5+、Chrome4+、Opera10.5+
webStorage的目的是克服由cookie帶來的一些限制,當(dāng)數(shù)據(jù)需要被嚴(yán)格控制在客戶端上時(shí),無須持續(xù)地將數(shù)據(jù)發(fā)回服務(wù)器。
webStorage的兩個(gè)主要目標(biāo)是:
提供一種在cookie之外存儲(chǔ)會(huì)話數(shù)據(jù)的途徑
提供一種存儲(chǔ)大量可以跨會(huì)話存在的數(shù)據(jù)的機(jī)制
有效期通過localStorage存儲(chǔ)的數(shù)據(jù)是永久性的,除非web應(yīng)用刻意刪除存儲(chǔ)的數(shù)據(jù),或者用戶通過設(shè)置瀏覽器配置(瀏覽器提供的特定的UI)來刪除,否則數(shù)據(jù)將一直保留在用戶的電腦上永不過期
sessionStorage的有效期和存儲(chǔ)數(shù)據(jù)的腳本所在的最頂層的窗口或者是瀏覽器標(biāo)簽頁是一樣的。一旦窗口或者標(biāo)簽頁被永久關(guān)閉了,那么所有通過sessionStorage存儲(chǔ)的數(shù)據(jù)也都被刪除了。(現(xiàn)代瀏覽器已經(jīng)具備了重新打開最近關(guān)閉的標(biāo)簽頁隨后恢復(fù)上一次瀏覽的會(huì)話功能,因此,這些標(biāo)簽頁以及與之相關(guān)的sessionStorage的有效期可能會(huì)更長(zhǎng))。
作用域localStorage的作用域是限定在文檔源級(jí)別的,它同樣也受瀏覽器供應(yīng)商限制。
sessionStorage的作用域也限定在文檔源中,不僅如此她還被限定在窗口中
存儲(chǔ)APIlocalStorage和sessionStorage通常被當(dāng)做普通的JS對(duì)象使用,這兩個(gè)對(duì)象提供了正式的API
保存數(shù)據(jù):localStorage.setItem( key, value ); sessionStorage.setItem( key, value );
讀取數(shù)據(jù):localStorage.getItem( key ); sessionStorage.getItem( key );
刪除單個(gè)數(shù)據(jù):localStorage.removeItem( key ); sessionStorage.removeItem( key );
刪除所有數(shù)據(jù):localStorage.clear( ); sessionStorage.clear( );
得到某個(gè)索引的key:localStorage.key( index ); sessionStorage.key( index );
Storage事件注:兩個(gè)都有屬性 length 表示key 的個(gè)數(shù),也即 key 長(zhǎng)度。key和value都必須為字符串。
對(duì)Storage對(duì)象進(jìn)行任何修改,都會(huì)在文檔上觸發(fā)storage事件。這個(gè)事件的event對(duì)象有以下屬性:
domain:發(fā)生變化的存儲(chǔ)空間的域名
key:設(shè)置或者刪除的鍵名
newValue:如果是設(shè)置值,則是新值;如果是刪除鍵,則是null。
oldValue:鍵被更改之前的值
限制對(duì)于localStorage和sessionStorage的存儲(chǔ)限制因?yàn)g覽器而異。具體參考:http://dev-test.nemikor.com/web-storage/support-test/
Cookie 概念cookie是指Web瀏覽器存儲(chǔ)的少量數(shù)據(jù),同時(shí)它是與具體的Web頁面或者站點(diǎn)相關(guān)的。最初是在客戶端用于存儲(chǔ)會(huì)話信息的。
有效期cookie默認(rèn)的有效期很短暫,他只能持續(xù)在web瀏覽器的會(huì)話期間,一旦用戶關(guān)閉瀏覽器,cookie保存的數(shù)據(jù)就丟失。
注:與sessionStorage有效期不同,它的有效期和整個(gè)瀏覽器進(jìn)程而不是單個(gè)瀏覽器窗口的有效期一致。
如果需要延長(zhǎng)cookie的有效期,可以通過設(shè)置max-age屬性,并明確告訴瀏覽器cookie的有效期有多長(zhǎng)。
作用域cookie的作用域是通過文檔源和文檔路徑來確定的??赏ㄟ^path設(shè)置路徑,domain設(shè)置域名。
安全secure注:cookie的path屬性不能被用做訪問控制機(jī)制。若一個(gè)頁面想讀取同一站點(diǎn)其他頁面的cookie,只要簡(jiǎn)單地將其他頁面以隱藏的形式加載進(jìn)來,隨后讀取對(duì)應(yīng)文檔的cookie就可以。
它是一個(gè)布爾值類型的屬性,用來表明cookie的值以何種形式傳播。其默認(rèn)是以不安全的形式(通過普通的、不安全的HTTP連接)傳遞的。若secure屬性被標(biāo)識(shí),那就只能當(dāng)瀏覽器和服務(wù)器通過HTTPS或者其他的安全協(xié)議連接(SSL)的時(shí)候才能傳遞它。
局限性每個(gè)特定的域名下最多生成20個(gè)cookie
IE6或更低版本最多20個(gè)cookie
IE7和之后的版本最多可以有50個(gè)cookie
Firefox最多50個(gè)cookie
Chrome和Safari沒有做硬性限制
IE和Opera會(huì)清理近期最少使用的cookie,F(xiàn)irefox會(huì)隨機(jī)清理cookie
cookie的最大大約為4096字節(jié),為了兼容性,一般不能超過4095字節(jié)。
在js中處理cookie在js中處理cookie有些復(fù)雜,其接口不友好(BOM的document.cookie);
cookie的名/值對(duì)都是經(jīng)過URL編碼的,所以必須使用decodeURIComponent ( ) 來解碼
由于JavaScript中讀寫cookie不是非常直觀,常常需要寫一些函數(shù)來簡(jiǎn)化cookie的功能?;镜腸ookie操作有三種:讀取、寫入、刪除。如下例所示:
var CookieUtil = { get:function(name){ var cookieName = enCodeURIComponent(name) + "", cookieStart = document.cookie.indexOf(cookieName), cookieValue = null; if (cookieStart > -1){ var cookieEnd = document.cookie.indexOf(";",cookieStart); if(cookieEnd == -1){ cookieEnd = document.cookie.length; } cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length , cookieEnd)); } return cookieValue; }, set:function(name,value,expires,path,domain,secure){ var cookieText = encodeURIComponent(name) + "=" +encodeURIComponent(value); if(expires instanceof Date){ cookieText += ";expires=" + expires.toGMTString(); } if(path){ cookieText += ";path=" + path; } if(domain){ cookieText += ";domain=" + domain; } if(secure){ cookieText += ";secure"; } document.cookie = cookieText; }, del:function(name,path,domain,secure){ this.set(name,"",new Date(0),path,domain,secure); } };IE userData
微軟在IE5及之后的IE瀏覽器中實(shí)現(xiàn)了它專屬的客戶端存儲(chǔ)機(jī)制——userData。
indexedDBindexed Database API,或者簡(jiǎn)稱為indexedDB,是瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫。目前,Chrome 27+、Firefox 21+和Opera 15+支持這個(gè)API,但是Safari和IE10+僅有部分支持。
應(yīng)用緩存Application CacheHTML5中新增了“應(yīng)用程序緩存”,允許Web應(yīng)用將應(yīng)用程序自身本地保存到用戶的瀏覽器中,是專門為開發(fā)離線Web應(yīng)用而設(shè)計(jì)的,可簡(jiǎn)稱為appCache。
描述文件想要在這個(gè)緩存中保存數(shù)據(jù),可以使用一個(gè)描述文件(manifest file),列出要下載和緩存的資源。
下面是一個(gè)簡(jiǎn)單的示例:
CACHE MANIFEST #注釋 reshui.html reshui.css reshui.js
要將描述文件與頁面關(guān)聯(lián)起來,可在中的manifest屬性中指定這個(gè)文件的路徑,這個(gè)文件的MIME類型必須是text/cache-manifest。如:
狀態(tài)
這個(gè)API的核心是applicationCache對(duì)象,這個(gè)對(duì)象有一個(gè)status屬性,屬性的值是常量,表示應(yīng)用緩存的如下狀態(tài):
0:無緩存,即沒有與頁面相關(guān)的應(yīng)用緩存。
1:閑置:即應(yīng)用緩存未得到更新。
2:檢查中,即正在下載描述文件并檢查更新。
3:下載中,即應(yīng)用緩存正在下載描述文件中指定的資源
4:更新完成,即應(yīng)用緩存已經(jīng)更新了資源,而且所有資源都已下載完畢,可以通過swapCache ( ) 來使用
5:廢棄,即應(yīng)用緩存的描述文件已經(jīng)不存在了,因此頁面無法再訪問應(yīng)用緩存。
事件appCache還有很多相關(guān)事件,表示其狀態(tài)的改變
checking:在瀏覽器為應(yīng)用緩存查找更新時(shí)觸發(fā)
error:在檢查更新或下載資源期間發(fā)生錯(cuò)誤時(shí)觸發(fā)
noupdate:在檢查描述文件發(fā)現(xiàn)文件無變化時(shí)觸發(fā)
downloading:在開始下載應(yīng)用緩存資源時(shí)觸發(fā)
progress:在文件下載應(yīng)用緩存的過程中持續(xù)不斷地觸發(fā)
updateready:在頁面新的應(yīng)用緩存下載完畢且可以通過swapCache ( ) 使用時(shí)觸發(fā)。
cached:在應(yīng)用緩存完整可用時(shí)觸發(fā)
一般來講,這些事件會(huì)隨著頁面加載按上述順序依次觸發(fā)。不過,通過調(diào)用update ( ) 方法也可以手工干預(yù),讓應(yīng)用緩存完整可用時(shí)觸發(fā)。applicationCache.update ( )
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/79559.html
摘要:淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗,提升用戶首屏體驗(yàn),提升用戶訪問速度,讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí),主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌,需求趨于平穩(wěn),這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí),結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況,發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要:淺談網(wǎng)站性能之前端性能優(yōu)化性能優(yōu)化的目的無非是減少用戶流量消耗,提升用戶首屏體驗(yàn),提升用戶訪問速度,讓用戶專注內(nèi)容本身。前端性能優(yōu)化減少請(qǐng)求數(shù)量基本原理在瀏覽器與服務(wù)器進(jìn)行通信時(shí),主要是通過進(jìn)行通信。 最近項(xiàng)目慢慢走上正軌,需求趨于平穩(wěn),這才想起需要對(duì)整站進(jìn)行性能優(yōu)化。經(jīng)過一段時(shí)間的學(xué)習(xí),結(jié)合現(xiàn)在項(xiàng)目的實(shí)際性能情況,發(fā)現(xiàn)確實(shí)有許多地方可以進(jìn)行優(yōu)化。于是就開始了我的前端性能優(yōu)化之旅。以下...
摘要:我的書簽我的書簽謹(jǐn)慎導(dǎo)入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧,讓你少寫不必要的,代碼更優(yōu)雅一勞永 我的書簽 我的書簽(謹(jǐn)慎導(dǎo)入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
摘要:我的書簽我的書簽謹(jǐn)慎導(dǎo)入,小心覆蓋工具類版本管理快速切換源配置教程指南可視化工具前端工具集前端助手網(wǎng)絡(luò)封包截取工具格式化工具標(biāo)注工具模擬請(qǐng)求類深入淺出布局你所不知道的動(dòng)畫技巧與細(xì)節(jié)常用代碼黑魔法小技巧,讓你少寫不必要的,代碼更優(yōu)雅一勞永 我的書簽 我的書簽(謹(jǐn)慎導(dǎo)入,小心覆蓋) 工具類 nvm: node版本管理 nrm: 快速切換npm源 shell: zsh+on-my-zsh配...
閱讀 2199·2021-11-22 13:52
閱讀 1067·2021-11-17 09:33
閱讀 2777·2021-09-01 10:49
閱讀 2906·2019-08-30 15:53
閱讀 2712·2019-08-29 16:10
閱讀 2483·2019-08-29 11:31
閱讀 1476·2019-08-26 11:40
閱讀 1964·2019-08-26 10:59