【杭州網(wǎng)站設(shè)計(jì)】HTML5 本地存儲(chǔ)( Local Storage )的前世今生 (一)
分享 2011.07.28 瀏覽次數(shù):7440次
【杭州網(wǎng)站設(shè)計(jì)】HTML5 本地存儲(chǔ)( Local Storage )的前世今生 (一)
原文連接:http://diveintohtml5.org/storage.html (深入HTML5)
作者:Mark Pilgrim
譯者 : feijia (tiimfei@gmail.com)
譯者的話(huà):上周讀到這篇關(guān)于html5 local storage 的綜述性文章覺(jué)得十分受益。這篇文章是作者的書(shū)HTML5 up & Running的的一個(gè)章節(jié),并在線(xiàn)以 CC-BY-3.0 License授權(quán)。 可以看到dojox.storage 是在HTML5標(biāo)準(zhǔn)成型前整個(gè)業(yè)界唯一提供統(tǒng)一的本地存儲(chǔ)接口的框架。 即使是在今天,為了兼顧用戶(hù)較早版本瀏覽器的兼容性,dojox.storage 仍然有很大的作用. 文章較長(zhǎng),分兩部分翻譯。 今天是第一部分。
長(zhǎng)久以來(lái)本地存儲(chǔ)能力一直是桌面應(yīng)用區(qū)別于Web應(yīng)用的一個(gè)主要優(yōu)勢(shì).對(duì)于桌面應(yīng)用(或者原生應(yīng)用),操作系統(tǒng)一般都提供了一個(gè)抽象層用來(lái)幫助應(yīng)用程序保存其本地?cái)?shù)據(jù)
例如(用戶(hù)配置信息或者運(yùn)行時(shí)狀態(tài)等). 常見(jiàn)的存放這些數(shù)據(jù)的方式有許多: 注冊(cè)表,INI文件,XML文件等等。 除了上面這些比較簡(jiǎn)單的用來(lái)存放 鍵值對(duì)的存儲(chǔ)形式,如
果你需要使用更加復(fù)雜強(qiáng)大的存儲(chǔ),那么你還可以進(jìn)一步在應(yīng)用程序中嵌入小型數(shù)據(jù)庫(kù),或者開(kāi)發(fā)出特定的數(shù)據(jù)文件格式。
遺憾的是,上面這些本地存儲(chǔ)方法對(duì)Web應(yīng)用來(lái)說(shuō)都是不適用的。在Web的發(fā)展史上,在很長(zhǎng)時(shí)間里 Cookies是唯一可以使用的在用戶(hù)本地存儲(chǔ)少量數(shù)據(jù)的方法。 但Cookies有一些非常明顯的缺陷,限制了它的應(yīng)用:
1. cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求中,所以無(wú)形中增加了流量。
2. 由于在HTTP請(qǐng)求中的cookie是明文傳遞的,所以安全性成問(wèn)題。 (除非你的整個(gè)應(yīng)用都是使用SSL來(lái)構(gòu)建的)
3. Cookie的大小限制在4 KB左右。 對(duì)于復(fù)雜的存儲(chǔ)需求來(lái)說(shuō)是不夠用的。
對(duì)于開(kāi)發(fā)者來(lái)說(shuō),他們真正需要的是
1. 不受限的存儲(chǔ)空間
2. 數(shù)據(jù)保存在客戶(hù)端
3. 數(shù)據(jù)的生命周期可以跨越頁(yè)面的刷新(甚至瀏覽器關(guān)閉重新打開(kāi))
4. 本地?cái)?shù)據(jù)不必每次都被重復(fù)的傳回服務(wù)器而導(dǎo)致流量增加
在HTML5之前,為了達(dá)成上述目標(biāo),人們開(kāi)發(fā)出了許多方法,但是總是有一些不盡人意之處。
在HTML5之前的本地存儲(chǔ)的簡(jiǎn)史
在互聯(lián)網(wǎng)發(fā)展早期,瀏覽器市場(chǎng)還很單一(處在領(lǐng)先地位的只有Netscape瀏覽器和IE)。在第一次瀏覽器大戰(zhàn)中,微軟的IE為了爭(zhēng)取更大的份額,它自己發(fā)明了許多額外附加的功能。 這些功能就包括動(dòng)態(tài)HTML (DHTML) , 而動(dòng)態(tài)HTML中就包含了一種稱(chēng)為userData的技術(shù)。
userData 允許網(wǎng)頁(yè)存儲(chǔ)最大64KB的基于XML的結(jié)構(gòu)化數(shù)據(jù)(每個(gè)站點(diǎn)) 。獲信的站點(diǎn),例如內(nèi)網(wǎng)站點(diǎn),可使用的存儲(chǔ)量可以增大到10倍,也即640K。 在使用userData時(shí),IE不會(huì)彈出任何形式的對(duì)話(huà)框來(lái)要求用戶(hù)授權(quán),也不允許程序增加本地存儲(chǔ)的容量。
在2002年,Adobe(譯者:那個(gè)時(shí)候其實(shí)應(yīng)該是Macromedia) 在Flash6中引入了一個(gè)新的本地存儲(chǔ)功能,并命名為“Flash Cookies'。 這個(gè)名稱(chēng)十分具有迷惑性,其實(shí)跟cookie沒(méi)什么關(guān)系。 在Flash中,這個(gè)功能被稱(chēng)作 Local Shared Objects 。 簡(jiǎn)單來(lái)說(shuō),這個(gè)技術(shù)允許Flash 對(duì)象存儲(chǔ)100KB的數(shù)據(jù)(每個(gè)站點(diǎn) )。 基于此, Brad Neuberg 開(kāi)發(fā)了一個(gè)稱(chēng)為 AMASS(AJAX Massive Storage System) Ajax大容量存儲(chǔ)系統(tǒng))的 Flash到JavaScript的橋接原型接口,允許開(kāi)發(fā)者在JavaScript中調(diào)用LSO,但是由于Flash的種種技術(shù)局限,這個(gè)原型并不大好用。 到2006年,隨著Flash 8 引入了ExternalInterface技術(shù),在JavaScript中訪(fǎng)問(wèn)LSO對(duì)象變得簡(jiǎn)化了許多。這時(shí)Brad重寫(xiě)了AMASS并把它整合到了流行的Dojo Toolkit 框架中, 并正式命名為dojox.storage。 Flash的這種技術(shù)允許每個(gè)站點(diǎn)存儲(chǔ)100KB的數(shù)據(jù),超過(guò)100KB,則每增加超過(guò)一個(gè)數(shù)量級(jí)(如1MB, 10MB 等),它就會(huì)彈出對(duì)話(huà)框來(lái)要用戶(hù)確認(rèn)并授權(quán)。
在2007年,Google啟動(dòng)了著名的Gears項(xiàng)目, Gears是一個(gè)通過(guò)插件技術(shù)來(lái)增強(qiáng)瀏覽器功能的開(kāi)源項(xiàng)目。 Gears提供了一套API來(lái)訪(fǎng)問(wèn)一個(gè)基于SQLite的嵌入式SQL數(shù)據(jù)庫(kù), 在獲得用戶(hù)的一次性授權(quán)后,應(yīng)用程序可以通過(guò)Gears存儲(chǔ)不限數(shù)量的本地?cái)?shù)據(jù)。
與此同時(shí), Brad Neuberg 和其他人繼續(xù)開(kāi)發(fā)dojox.storage , 希望能夠提供一套統(tǒng)一的JavaScript接口來(lái)封裝上面各種插件和接口。 到2009年時(shí), dojox.storage 已經(jīng)可以做到自動(dòng)的偵測(cè)用戶(hù)瀏覽器所支持的本地存儲(chǔ)技術(shù),并提供統(tǒng)一的訪(fǎng)問(wèn)接口,包括Adobe Flash, Adobe AIR, Gears 以及早期 Firefox瀏覽器所提供的HTML5 存儲(chǔ)功能。
從我們前面的介紹可以看到這些五花八門(mén)的技術(shù)都有一個(gè)問(wèn)題,他們要么是某個(gè)瀏覽器所特有的技術(shù),要么依賴(lài)于某個(gè)第三方插件(flash或Gears). 雖然Dojox.storage非常有遠(yuǎn)見(jiàn)的試圖去封裝這些區(qū)別,但是用戶(hù)仍然會(huì)因?yàn)榈讓蛹夹g(shù)的限制而在用戶(hù)體驗(yàn),允許存儲(chǔ)的數(shù)據(jù)量等方面無(wú)法統(tǒng)一。 這時(shí),只有HTML5標(biāo)準(zhǔn)的出現(xiàn)才能徹底解決這些問(wèn)題: 提供一套標(biāo)準(zhǔn)化的API, 被絕大多數(shù)瀏覽器支持,不用依賴(lài)任何第三方插件。
HTML5 本地存儲(chǔ)簡(jiǎn)介
這里我們稱(chēng)為HTML Storage的實(shí)際上是一個(gè)稱(chēng)為 Web Storage 的標(biāo)準(zhǔn), 它原來(lái)曾是HTML5標(biāo)準(zhǔn)的一部分,但由于某些政治因素,現(xiàn)在它被獨(dú)立出來(lái)。 某些瀏覽器廠(chǎng)商也稱(chēng)它為 本地存儲(chǔ)(local storage),或者DOM存儲(chǔ) (DOM Storage)
那么究竟什么是HTML5本地存儲(chǔ) ? 簡(jiǎn)單來(lái)說(shuō),它就是一種讓網(wǎng)頁(yè)可以把鍵值對(duì)存儲(chǔ)在用戶(hù)瀏覽器客戶(hù)端的方法。像Cookie一樣,這些數(shù)據(jù)不會(huì)因?yàn)槟愦蜷_(kāi)新網(wǎng)站,刷新頁(yè)面,乃至關(guān)閉你的瀏覽器而消失。 而與Cookie不同的時(shí),這些數(shù)據(jù)不會(huì)每次隨著HTTP請(qǐng)求被發(fā)送到服務(wù)器端(當(dāng)然如果你需要這么做,你可以自己編程實(shí)現(xiàn) ). 因?yàn)檫@是HTML5規(guī)范的一部分,這一接口會(huì)被瀏覽器原生支持,不用依賴(lài)任何第三方插件。
那么,現(xiàn)在有哪些瀏覽器支持這一接口呢? 在這篇文章寫(xiě)作時(shí)(譯者:2011年2月) 差不多所有主流瀏覽器的最新版都支持了,連IE8都支持了。
IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
---|---|---|---|---|---|---|
8.0+ | 3.5+ | 4.0+ | 4.0+ | 10.5+ | 2.0+ | 2.0+ |
在你的JS代碼中,你可以通過(guò)winow.localStorage 對(duì)象來(lái)訪(fǎng)問(wèn)HTML5 本地存儲(chǔ)功能. 當(dāng)然,考慮到瀏覽器兼容性,你在使用前應(yīng)該先偵測(cè)一下你的用戶(hù)的瀏覽器是否支持.
- function supports_html5_storage() {
- try {
- return 'localStorage' in window && window['localStorage'] !== null;
- } catch (e) {
- return false;
- }
- }
另一種方式是使用Modernizr (譯者:一個(gè)開(kāi)源的用來(lái)偵測(cè)用戶(hù)瀏覽器對(duì)HTML5支持度的工具) 來(lái)偵測(cè)
- if (Modernizr.localstorage) {
- // window.localStorage is available!
- } else {
- // 瀏覽器不支持HTML5 storage :(
- // 可以考慮使用dojox.storage 或其他方法
- }
如何使用HTML5 存儲(chǔ)
HTML5 存儲(chǔ)是基于鍵值對(duì)的。數(shù)據(jù)存儲(chǔ)在一個(gè)鍵里,訪(fǎng)問(wèn)數(shù)據(jù)時(shí)可以根據(jù)同樣的鍵獲得上次存儲(chǔ)的數(shù)據(jù). 鍵是一個(gè)字符串. 而數(shù)據(jù)則可以是任何類(lèi)型的JavaScript基本數(shù)據(jù)類(lèi)型,包括 字符串,Boolean,整數(shù),和浮點(diǎn)數(shù). 不過(guò)需要注意的是,這些數(shù)據(jù)在存儲(chǔ)時(shí)實(shí)際上是以字符串保存的。 因此在訪(fǎng)問(wèn)數(shù)據(jù)時(shí)你需要利用parseInt() 或 parseFloat()方法來(lái)做數(shù)據(jù)類(lèi)型的轉(zhuǎn)換。
- interface Storage {
- getter any getItem(in DOMString key);
- setter creator void setItem(in DOMString key, in any data);
- };
如果在調(diào)用setItem 時(shí)使用一個(gè)已經(jīng)存在的鍵,將會(huì)直接覆蓋掉該鍵上保存的值。而調(diào)用getItem時(shí)傳入一個(gè)不存在的鍵,則會(huì)返回一個(gè)null ,不會(huì)拋出異常。
就像其他JavaScript對(duì)象一樣,你也可以將localStorage對(duì)象當(dāng)成是關(guān)聯(lián)數(shù)組使用(associative map)
除了使用getItem和setItem之外,你可以使用中括號(hào)的方式來(lái)引用數(shù)據(jù). 例如
- var foo = localStorage.getItem('bar');
- // ...
- localStorage.setItem('bar', foo);
- //和下面代碼是等價(jià)的:
- var foo = localStorage['bar'];
- // ...
- localStorage['bar'] = foo;
該接口還提供了方法來(lái)刪除某個(gè)鍵和清空整個(gè)存儲(chǔ)區(qū)域(刪除所有的鍵和值)
- interface Storage {
- deleter void removeItem(in DOMString key);
- void clear();
- };
如果removeItem傳入一個(gè)不存在的key則無(wú)操作,也不會(huì)有異常。
最后,還提供了一個(gè)length屬性來(lái)指示存儲(chǔ)區(qū)域中所包含的所有鍵值對(duì)的數(shù)量 以及遍歷所有鍵的key方法
- interface Storage {
- readonly attribute unsigned long length;
- getter DOMString key(in unsigned long index);
- };
如果你向key方法傳入了一個(gè)越界的值(不在0到length-1 之間),則該方法返回null。
標(biāo)簽:
杭州網(wǎng)站設(shè)計(jì)公司 杭州網(wǎng)站建設(shè)公司 杭州網(wǎng)站制作公司 杭州網(wǎng)站設(shè)計(jì) 杭州網(wǎng)站建設(shè) 杭州網(wǎng)站制作 杭州精品網(wǎng)站制作 杭州精典網(wǎng)站制作 杭州精品網(wǎng)站設(shè)計(jì)
-
杭州網(wǎng)站設(shè)計(jì)公司:品牌網(wǎng)站開(kāi)發(fā)助力企業(yè)成長(zhǎng)
日期:2024-12-20瀏覽次數(shù):414次
-
杭州網(wǎng)站建設(shè)公司:商城網(wǎng)站建設(shè)的六大關(guān)鍵步驟
日期:2024-12-18瀏覽次數(shù):487次
-
杭州網(wǎng)站制作:醫(yī)院網(wǎng)站設(shè)計(jì)與域名備案的復(fù)雜性探討
日期:2024-12-18瀏覽次數(shù):498次
-
杭州網(wǎng)站制作公司:打造安全可靠的醫(yī)院網(wǎng)站
日期:2024-12-11瀏覽次數(shù):725次
-
杭州網(wǎng)站設(shè)計(jì)公司:數(shù)據(jù)庫(kù)在高端網(wǎng)站制作中的關(guān)鍵作用
日期:2024-12-11瀏覽次數(shù):694次
相關(guān)新聞
整合同類(lèi)新聞,相關(guān)新聞一手掌握
-
七臺(tái)河企業(yè),如何做一個(gè)美觀(guān)的網(wǎng)站
日期:2023-02-21瀏覽次數(shù):1520次
-
七臺(tái)河做網(wǎng)站的核心是什么?
日期:2023-02-21瀏覽次數(shù):1539次
-
如何進(jìn)行系統(tǒng)的七臺(tái)河網(wǎng)頁(yè)設(shè)計(jì)?
日期:2023-02-21瀏覽次數(shù):1592次
-
七臺(tái)河全網(wǎng)營(yíng)銷(xiāo)的具體方式有哪些?
日期:2023-02-21瀏覽次數(shù):1470次
最新新聞
與互聯(lián)網(wǎng)同行,實(shí)時(shí)掌握網(wǎng)建行業(yè)最新動(dòng)態(tài)
-
【杭州網(wǎng)站設(shè)計(jì)】淘寶無(wú)線(xiàn)開(kāi)放平臺(tái)是最具盈利前景的移動(dòng)藍(lán)海
日期:2011-07-25瀏覽次數(shù):6645次
-
在網(wǎng)站建設(shè)中,如何保障網(wǎng)站安全?
日期:2020-04-02瀏覽次數(shù):2000次
-
開(kāi)發(fā)小程序商城,一定要配備這些功能
日期:2020-06-04瀏覽次數(shù):4368次
-
杭州網(wǎng)站優(yōu)化之框架技術(shù)優(yōu)化方法
日期:2024-01-04瀏覽次數(shù):2537次
-
杭州網(wǎng)站設(shè)計(jì)公司:在SEO視角下的定制網(wǎng)站空間選擇要點(diǎn)
日期:2024-08-09瀏覽次數(shù):1478次
隨機(jī)新聞
新聞新動(dòng)態(tài),您需要的新聞管家
洞悉市場(chǎng)趨勢(shì)演變讓傳播回歸社會(huì)
免費(fèi)獲取網(wǎng)站建設(shè)與網(wǎng)絡(luò)推廣方案報(bào)價(jià)
-
關(guān)于我們
杭州帷拓科技有限公司,是一家新型的全案網(wǎng)絡(luò)開(kāi)發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)為核心的專(zhuān)業(yè)網(wǎng)絡(luò)技術(shù)服務(wù)供應(yīng)商,帷拓科技致力于全面分析市場(chǎng)環(huán)境、衡量與預(yù)測(cè)市場(chǎng)需求、整合區(qū)別于行業(yè)競(jìng)爭(zhēng)對(duì)手的絕對(duì)優(yōu)勢(shì),結(jié)合品牌理念深度挖掘項(xiàng)目?jī)?yōu)勢(shì)和產(chǎn)品價(jià)值,提升客戶(hù)品牌認(rèn)知、認(rèn)可度。
-
我們的客戶(hù)
帷拓科技?xì)v經(jīng)十年沉淀,與國(guó)內(nèi)外上千家客戶(hù)達(dá)成合作關(guān)系,其中穩(wěn)定合作的公司有:浙江華為、浙江移動(dòng)、浙江5G產(chǎn)業(yè)聯(lián)盟、浙江省社科院、綠城足球俱樂(lè)部、娃哈哈雙語(yǔ)學(xué)校、健康中國(guó)杭州峰會(huì)、科雷機(jī)電等,帷拓科技始終堅(jiān)持“帷有專(zhuān)業(yè),才能拓展無(wú)限”的服務(wù)理念,堅(jiān)持“認(rèn)真堅(jiān)持細(xì)節(jié)”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現(xiàn)共贏(yíng)。
-
我們的業(yè)務(wù)
帷拓科技主營(yíng)業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設(shè)、APP開(kāi)發(fā)、小程序開(kāi)發(fā)、商城網(wǎng)站建設(shè)、公眾號(hào)運(yùn)營(yíng)以及數(shù)字營(yíng)銷(xiāo)等,涵蓋了服務(wù)、房產(chǎn)、數(shù)碼、服裝、物流貿(mào)易等行業(yè),根據(jù)品牌現(xiàn)狀,為每個(gè)客戶(hù)量身定制項(xiàng)目整體服務(wù)方案,以敏銳的市場(chǎng)洞察力、創(chuàng)新的市場(chǎng)策劃能力,全面把握市場(chǎng)變化,為客戶(hù)實(shí)現(xiàn)從企業(yè)到消費(fèi)者的價(jià)值轉(zhuǎn)換。