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