【成都網(wǎng)站設(shè)計(jì)】HTML5 本地存儲(chǔ)( Local Storage )的前世今生 (一)

原文連接：http://diveintohtml5.org/storage.html (深入HTML5)

作者：Mark Pilgrim

譯者 : feijia (tiimfei@gmail.com)

譯者的話：上周讀到這篇關(guān)于html5 local storage 的綜述性文章覺得十分受益。這篇文章是作者的書HTML5 up & Running的的一個(gè)章節(jié)，并在線以 CC-BY-3.0 License授權(quán)。 可以看到dojox.storage 是在HTML5標(biāo)準(zhǔn)成型前整個(gè)業(yè)界提供統(tǒng)一的本地存儲(chǔ)接口的框架。 即使是在今天，為了兼顧用戶較早版本瀏覽器的兼容性，dojox.storage 仍然有很大的作用. 文章較長，分兩部分翻譯。 今天是第一部分。

長久以來本地存儲(chǔ)能力一直是桌面應(yīng)用區(qū)別于Web應(yīng)用的一個(gè)主要優(yōu)勢.對(duì)于桌面應(yīng)用（或者原生應(yīng)用)，操作系統(tǒng)一般都提供了一個(gè)抽象層用來幫助應(yīng)用程序保存其本地?cái)?shù)據(jù)

例如（用戶配置信息或者運(yùn)行時(shí)狀態(tài)等). 常見的存放這些數(shù)據(jù)的方式有許多： 注冊(cè)表，INI文件，XML文件等等。 除了上面這些比較簡單的用來存放 鍵值對(duì)的存儲(chǔ)形式，如
果你需要使用更加復(fù)雜強(qiáng)大的存儲(chǔ)，那么你還可以進(jìn)一步在應(yīng)用程序中嵌入小型數(shù)據(jù)庫，或者開發(fā)出特定的數(shù)據(jù)文件格式。

遺憾的是，上面這些本地存儲(chǔ)方法對(duì)Web應(yīng)用來說都是不適用的。在Web的發(fā)展史上，在很長時(shí)間里 Cookies是可以使用的在用戶本地存儲(chǔ)少量數(shù)據(jù)的方法。 但Cookies有一些非常明顯的缺陷，限制了它的應(yīng)用:

1. cookie會(huì)被附加在每個(gè)HTTP請(qǐng)求中，所以無形中增加了流量。

2. 由于在HTTP請(qǐng)求中的cookie是明文傳遞的，所以安全性成問題。 （除非你的整個(gè)應(yīng)用都是使用SSL來構(gòu)建的)
3. Cookie的大小限制在4 KB左右。 對(duì)于復(fù)雜的存儲(chǔ)需求來說是不夠用的。

對(duì)于開發(fā)者來說，他們真正需要的是

1. 不受限的存儲(chǔ)空間

2. 數(shù)據(jù)保存在客戶端

3. 數(shù)據(jù)的生命周期可以跨越頁面的刷新（甚至瀏覽器關(guān)閉重新打開)

4. 本地?cái)?shù)據(jù)不必每次都被重復(fù)的傳回服務(wù)器而導(dǎo)致流量增加

在HTML5之前，為了達(dá)成上述目標(biāo)，人們開發(fā)出了許多方法，但是總是有一些不盡人意之處。

在HTML5之前的本地存儲(chǔ)的簡史

在互聯(lián)網(wǎng)發(fā)展早期，瀏覽器市場還很單一（處在地位的只有Netscape瀏覽器和IE）。在第一次瀏覽器大戰(zhàn)中，微軟的IE為了爭取更大的份額，它自己發(fā)明了許多額外附加的功能。 這些功能就包括動(dòng)態(tài)HTML （DHTML） ， 而動(dòng)態(tài)HTML中就包含了一種稱為userData的技術(shù)。

userData 允許網(wǎng)頁存儲(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ì)話框來要求用戶授權(quán)，也不允許程序增加本地存儲(chǔ)的容量。

在2002年，Adobe（譯者：那個(gè)時(shí)候其實(shí)應(yīng)該是Macromedia) 在Flash6中引入了一個(gè)新的本地存儲(chǔ)功能，并命名為“Flash Cookies'。 這個(gè)名稱十分具有迷惑性，其實(shí)跟cookie沒什么關(guān)系。 在Flash中，這個(gè)功能被稱作 Local Shared Objects 。 簡單來說，這個(gè)技術(shù)允許Flash 對(duì)象存儲(chǔ)100KB的數(shù)據(jù)（每個(gè)站點(diǎn) ）。 基于此， Brad Neuberg 開發(fā)了一個(gè)稱為 AMASS(AJAX Massive Storage System) Ajax大容量存儲(chǔ)系統(tǒng))的 Flash到JavaScript的橋接原型接口,允許開發(fā)者在JavaScript中調(diào)用LSO，但是由于Flash的種種技術(shù)局限，這個(gè)原型并不大好用。 到2006年，隨著Flash 8 引入了ExternalInterface技術(shù)，在JavaScript中訪問LSO對(duì)象變得簡化了許多。這時(shí)Brad重寫了AMASS并把它整合到了流行的Dojo Toolkit 框架中， 并正式命名為dojox.storage。 Flash的這種技術(shù)允許每個(gè)站點(diǎn)存儲(chǔ)100KB的數(shù)據(jù)，超過100KB，則每增加超過一個(gè)數(shù)量級(jí)（如1MB， 10MB 等），它就會(huì)彈出對(duì)話框來要用戶確認(rèn)并授權(quán)。

在2007年，Google啟動(dòng)了著名的Gears項(xiàng)目， Gears是一個(gè)通過插件技術(shù)來增強(qiáng)瀏覽器功能的開源項(xiàng)目。 Gears提供了一套API來訪問一個(gè)基于SQLite的嵌入式SQL數(shù)據(jù)庫， 在獲得用戶的一次性授權(quán)后，應(yīng)用程序可以通過Gears存儲(chǔ)不限數(shù)量的本地?cái)?shù)據(jù)。

與此同時(shí), Brad Neuberg 和其他人繼續(xù)開發(fā)dojox.storage ， 希望能夠提供一套統(tǒng)一的JavaScript接口來封裝上面各種插件和接口。 到2009年時(shí)， dojox.storage 已經(jīng)可以做到自動(dòng)的偵測用戶瀏覽器所支持的本地存儲(chǔ)技術(shù)，并提供統(tǒng)一的訪問接口，包括Adobe Flash, Adobe AIR, Gears 以及早期 Firefox瀏覽器所提供的HTML5 存儲(chǔ)功能。

從我們前面的介紹可以看到這些五花八門的技術(shù)都有一個(gè)問題，他們要么是某個(gè)瀏覽器所特有的技術(shù)，要么依賴于某個(gè)第三方插件(flash或Gears). 雖然Dojox.storage非常有遠(yuǎn)見的試圖去封裝這些區(qū)別，但是用戶仍然會(huì)因?yàn)榈讓蛹夹g(shù)的限制而在用戶體驗(yàn)，允許存儲(chǔ)的數(shù)據(jù)量等方面無法統(tǒng)一。 這時(shí)，只有HTML5標(biāo)準(zhǔn)的出現(xiàn)才能徹底解決這些問題: 提供一套標(biāo)準(zhǔn)化的API, 被絕大多數(shù)瀏覽器支持，不用依賴任何第三方插件。

HTML5 本地存儲(chǔ)簡介

這里我們稱為HTML Storage的實(shí)際上是一個(gè)稱為 Web Storage 的標(biāo)準(zhǔn)， 它原來曾是HTML5標(biāo)準(zhǔn)的一部分，但由于某些政治因素，現(xiàn)在它被獨(dú)立出來。 某些瀏覽器廠商也稱它為 本地存儲(chǔ)(local storage)，或者DOM存儲(chǔ) (DOM Storage)

那么究竟什么是HTML5本地存儲(chǔ) ？ 簡單來說，它就是一種讓網(wǎng)頁可以把鍵值對(duì)存儲(chǔ)在用戶瀏覽器客戶端的方法。像Cookie一樣，這些數(shù)據(jù)不會(huì)因?yàn)槟愦蜷_新網(wǎng)站，刷新頁面，乃至關(guān)閉你的瀏覽器而消失。 而與Cookie不同的時(shí)，這些數(shù)據(jù)不會(huì)每次隨著HTTP請(qǐng)求被發(fā)送到服務(wù)器端(當(dāng)然如果你需要這么做，你可以自己編程實(shí)現(xiàn) ）. 因?yàn)檫@是HTML5規(guī)范的一部分，這一接口會(huì)被瀏覽器原生支持，不用依賴任何第三方插件。

那么，現(xiàn)在有哪些瀏覽器支持這一接口呢？ 在這篇文章寫作時(shí)（譯者:2011年2月） 差不多所有主流瀏覽器的最新版都支持了，連IE8都支持了。

HTML5 Storage support IE Firefox Safari Chrome Opera iPhone Android 8.0+ 3.5+ 4.0+ 4.0+ 10.5+ 2.0+ 2.0+

在你的JS代碼中，你可以通過winow.localStorage 對(duì)象來訪問HTML5 本地存儲(chǔ)功能. 當(dāng)然，考慮到瀏覽器兼容性，你在使用前應(yīng)該先偵測一下你的用戶的瀏覽器是否支持.

新聞名稱：【成都網(wǎng)站設(shè)計(jì)】HTML5 本地存儲(chǔ)( Local Storage )的前世今生 (一)
標(biāo)題鏈接：http://chinadenli.net/news/174757.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)