怎樣進行JavaScript本地存儲實踐

這篇文章給大家介紹怎樣進行JavaScript本地存儲實踐，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

本地存儲解決方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。
借用網上的一張圖來看下目前主流的本地存儲方案：

• Cookie： 在web中得到廣泛應用，但局限性非常明顯，容量太小，有些站點會因為出于安全的考慮而禁用cookie，cookie沒有想象中的那么安全，Cookie 的內容會隨著頁面請求一并發往服務器。

• Flash SharedObject： 使用的是kissy的store模塊來調用Flash SharedObject。Flash SharedObject的優點是容量適中，基本上不存在兼容性問題，缺點是要在頁面中引入特定的swf和js文件，增加額外負擔，處理繁瑣；還是有部分機子沒有flash運行環境。

• Google Gears： Google的離線方案，已經停止更新，官方推薦使用html5的localStorage方案。

• User Data： 是微軟為IE專門在系統中開辟的一塊存儲空間，所以說只支持Windows+IE的組合，實際測試在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。在XP下，一般位于C:\Documents and Settings\用戶名\UserData，有些時候會在C:\Documents and Settings\用戶名\Application Data\Microsoft\Internet Explorer\UserData。在Vista下，位于C:\Users\用戶名\AppData\Roaming\Microsoft\Internet
  Explorer\UserData；單個文件的大小限制是128KB，一個域名下總共可以保存1024KB的文件，文件個數應該沒有限制。在受限站點里這兩個值分別是64KB和640KB，所以如果考慮到各種情況的話，單個文件最好能控制64KB以下。

• localStorage： 相對于上述本地存儲方案，localStorage有自身的優點：容量大、易用、強大、原生支持；缺點是兼容性差些（chrome,  safari, firefox，IE 9，IE8都支持 localStorage，主要是IE8以下版本不支持）、安全性也差些（所以請勿使用localStorage保存敏感信息）。

主要說說localStorage和UserData：

UserData

• 基本語法 :
  XML: <Prefix: CustomTag id=sID style=”behavior:url(‘#default#userData’)” />
  HTML: <ELEMENT style=”behavior:url(‘#default#userData’)” id=sID>

• Script:
  object.style.behavior = “url(‘#default#userData’)”
  object.addBehavior (“#default#userData”)

• 屬性:
  expires 設置或者獲取 userData behavior 保存數據的失效日期。
  XMLDocument 獲取 XML 的引用。

• 方法:
  getAttribute() 獲取指定的屬性值。
  load(object) 從 userData 存儲區載入存儲的對象數據。
  removeAttribute() 移除對象的指定屬性。
  save(object) 將對象數據存儲到一個 userData 存儲區。
  setAttribute() 設置指定的屬性值。

要使用userData存儲功能，必須先建立一個HTML標簽，然后將behavior:url(‘#default#userData’)樣式屬性加上去，等于說userData是寄存于HTML標簽的，當然不是所有標簽都是可以的，僅限于部分標簽。要了解更多的信息可以訪問MSDN的《userData
Behavior》 。

這里封裝一些方法：

localStorage

非常通俗易懂的接口:

• localStorage.getItem(key):獲取指定key本地存儲的值

• localStorage.setItem(key,value)：將value存儲到key字段

• localStorage.removeItem(key):刪除指定key本地存儲的值

留意localStorage存儲的值都是字符串類型，在處理復雜的數據時，比如json數據時，需要借助JSON類，將json字符串轉換成真正可用的json格式，localStorage第二個實戰教程會重點演示相關功能。localStorage還提供了一個storage事件，在存儲的值改變后觸發。
目前瀏覽器都帶有很好的開發者調試功能，下面分別是Chrome和Firefox的調試工具查看LocalStorage：


特別注意：localStorage在不同瀏覽器中的差異研究

demo頁面

這里寫了一個簡單的demo頁面，使用 localStorage和userData 的例子，試著在demo頁面的文本框中編輯內容，不要點擊發布按鈕，關閉或刷新（強制刷新Ctrl+F5）會保存你編輯好的內容，它會始終有效，除非您點擊發布按鈕刪除掉存儲的內容。整個過程中沒有任何被數據發送到服務器。

關于怎樣進行JavaScript本地存儲實踐就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。