无码乱肉视频免费大全合集,亚洲第一A在线观看网站,黄网站色视频免费无风险,免费国产黄网在线观看

24小時咨詢電話：0571-88023217梅州網站建設公司 10年專業(yè)網絡服務供應商

資訊中心

- 直擊網站建設第一現場，掌握全球化的消息 -

當前位置 : 首頁 > 資訊中心 > 【杭州網站設計】HTML5 本地存儲( Local Storage )的前世今生 (一)

【杭州網站設計】HTML5 本地存儲( Local Storage )的前世今生 (一)

分享 2011.07.28 瀏覽次數：7532次

【杭州網站設計】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授權。 可以看到dojox.storage 是在HTML5標準成型前整個業(yè)界唯一提供統(tǒng)一的本地存儲接口的框架。 即使是在今天，為了兼顧用戶較早版本瀏覽器的兼容性，dojox.storage 仍然有很大的作用. 文章較長，分兩部分翻譯。 今天是第一部分。


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

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

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

1. cookie會被附加在每個HTTP請求中，所以無形中增加了流量。

2. 由于在HTTP請求中的cookie是明文傳遞的，所以安全性成問題。 （除非你的整個應用都是使用SSL來構建的)
3. Cookie的大小限制在4 KB左右。 對于復雜的存儲需求來說是不夠用的。


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

1. 不受限的存儲空間

2. 數據保存在客戶端

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

4. 本地數據不必每次都被重復的傳回服務器而導致流量增加

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

在HTML5之前的本地存儲的簡史


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


userData 允許網頁存儲最大64KB的基于XML的結構化數據（每個站點） 。獲信的站點，例如內網站點，可使用的存儲量可以增大到10倍，也即640K。 在使用userData時，IE不會彈出任何形式的對話框來要求用戶授權，也不允許程序增加本地存儲的容量。


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


在2007年，Google啟動了著名的Gears項目， Gears是一個通過插件技術來增強瀏覽器功能的開源項目。 Gears提供了一套API來訪問一個基于SQLite的嵌入式SQL數據庫， 在獲得用戶的一次性授權后，應用程序可以通過Gears存儲不限數量的本地數據。

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

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


 

HTML5 本地存儲簡介


這里我們稱為HTML Storage的實際上是一個稱為 Web Storage 的標準， 它原來曾是HTML5標準的一部分，但由于某些政治因素，現在它被獨立出來。 某些瀏覽器廠商也稱它為 本地存儲(local storage)，或者DOM存儲 (DOM Storage)

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

那么，現在有哪些瀏覽器支持這一接口呢？ 在這篇文章寫作時（譯者: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 對象來訪問HTML5 本地存儲功能. 當然，考慮到瀏覽器兼容性，你在使用前應該先偵測一下你的用戶的瀏覽器是否支持.

view plain
  1. function supports_html5_storage() {
  2. try {
  3. return 'localStorage' in window && window['localStorage'] !== null;
  4. } catch (e) {
  5. return false;
  6. }
  7. }





另一種方式是使用Modernizr (譯者：一個開源的用來偵測用戶瀏覽器對HTML5支持度的工具) 來偵測

view plain
  1. if (Modernizr.localstorage) {
  2. // window.localStorage is available!
  3. } else {
  4. // 瀏覽器不支持HTML5 storage :(
  5. // 可以考慮使用dojox.storage 或其他方法
  6. }





 

如何使用HTML5 存儲


HTML5 存儲是基于鍵值對的。數據存儲在一個鍵里，訪問數據時可以根據同樣的鍵獲得上次存儲的數據. 鍵是一個字符串. 而數據則可以是任何類型的JavaScript基本數據類型，包括 字符串，Boolean，整數，和浮點數. 不過需要注意的是，這些數據在存儲時實際上是以字符串保存的。 因此在訪問數據時你需要利用parseInt() 或 parseFloat()方法來做數據類型的轉換。
 

view plain
  1. interface Storage {
  2. getter any getItem(in DOMString key);
  3. setter creator void setItem(in DOMString key, in any data);
  4. };



如果在調用setItem 時使用一個已經存在的鍵，將會直接覆蓋掉該鍵上保存的值。而調用getItem時傳入一個不存在的鍵，則會返回一個null ，不會拋出異常。

 

就像其他JavaScript對象一樣，你也可以將localStorage對象當成是關聯數組使用(associative map)

除了使用getItem和setItem之外，你可以使用中括號的方式來引用數據. 例如

 

view plain
  1. var foo = localStorage.getItem('bar');
  2. // ...
  3. localStorage.setItem('bar', foo);
  4. //和下面代碼是等價的：
  5. var foo = localStorage['bar'];
  6. // ...
  7. localStorage['bar'] = foo;




該接口還提供了方法來刪除某個鍵和清空整個存儲區(qū)域(刪除所有的鍵和值)
 

view plain
  1. interface Storage {
  2. deleter void removeItem(in DOMString key);
  3. void clear();
  4. };



如果removeItem傳入一個不存在的key則無操作，也不會有異常。


最后，還提供了一個length屬性來指示存儲區(qū)域中所包含的所有鍵值對的數量 以及遍歷所有鍵的key方法
 

view plain
  1. interface Storage {
  2. readonly attribute unsigned long length;
  3. getter DOMString key(in unsigned long index);
  4. };


 

如果你向key方法傳入了一個越界的值（不在0到length-1 之間），則該方法返回null。

 

標簽：

杭州網站設計公司 杭州網站建設公司 杭州網站制作公司 杭州網站設計 杭州網站建設 杭州網站制作 杭州精品網站制作 杭州精典網站制作 杭州精品網站設計

最新網站案例

洞悉市場趨勢演變讓傳播回歸社會

    免費獲取網站建設與網絡推廣方案報價

    • 關于我們

      杭州帷拓科技有限公司，是一家新型的全案網絡開發(fā)公司，作為以互聯網高端網站建設、APP開發(fā)、小程序開發(fā)為核心的專業(yè)網絡技術服務供應商，帷拓科技致力于全面分析市場環(huán)境、衡量與預測市場需求、整合區(qū)別于行業(yè)競爭對手的絕對優(yōu)勢，結合品牌理念深度挖掘項目優(yōu)勢和產品價值，提升客戶品牌認知、認可度。

    • 我們的客戶

      帷拓科技歷經十年沉淀，與國內外上千家客戶達成合作關系，其中穩(wěn)定合作的公司有：浙江華為、浙江移動、浙江5G產業(yè)聯盟、浙江省社科院、綠城足球俱樂部、娃哈哈雙語學校、健康中國杭州峰會、科雷機電等，帷拓科技始終堅持“帷有專業(yè)，才能拓展無限”的服務理念，堅持“認真堅持細節(jié)”的優(yōu)質服務理念，不斷完善自身，成就企業(yè)，最終實現共贏。

    • 我們的業(yè)務

      帷拓科技主營業(yè)務范圍包含互聯網高端網站建設、APP開發(fā)、小程序開發(fā)、商城網站建設、公眾號運營以及數字營銷等，涵蓋了服務、房產、數碼、服裝、物流貿易等行業(yè)，根據品牌現狀，為每個客戶量身定制項目整體服務方案，以敏銳的市場洞察力、創(chuàng)新的市場策劃能力，全面把握市場變化，為客戶實現從企業(yè)到消費者的價值轉換。

    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur
    Designerpart Designagentur