JavaScript本地存儲實踐

一、各類存儲方案的對比

- Cookies：瀏覽器均支持，容量爲4KB
- UserData：僅IE支持，容量爲64KB
- Flash：100KB，非HTML原生，須要插件支持
- Google Gears SQLite ：須要插件支持，容量無限制
- LocalStorage：HTML5，容量爲5M

二、Cookie的缺點

1）cookie的大小受限制，cookie大小被限制在4KB，不能接受像文件或郵件那樣的大數據。

2）只要有請求涉及cookie，cookie就要在服務器和瀏覽器之間來回傳送（這解釋爲何本地文件不能測試cookie）。一方面，這意味着cookie數據在網絡上是可見的，不加密的狀況下有安全風險；另外一方面，不管加載哪一個相關url，cookie中的數據都會消耗網絡帶寬。

三、LocalStorage的缺點

① localstorage大小限制在500萬字符左右，各個瀏覽器不一致
② localstorage在隱私模式下不可讀取
③ localstorage本質是在讀寫文件，數據多的話會比較卡（firefox會一次性將數據導入內存，想一想就以爲嚇人啊）
④ localstorage不能被爬蟲爬取，不要用它徹底取代URL傳參

四、LocalStorage的api

api名稱	介紹	實例
setItem(key,value)	設置本地存儲數據	LocalStorage.setItem("myFirstKey","myFirstValue"); LocalStorage.myFirstKey = myFirstValue; LocalStorage["myFirstKey"] ="myFirstValue";
getItem(key)	獲取本地存儲數據	LocalStorage.getItem("myFirstKey");
removeItem(key)	刪除指定鍵數據	LocalStorage.removeItem("myFirstKey");
clear()	刪除全部數據	LocalStorage.clear();

五、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》 。

如今使用的全瀏覽器支持的本地存儲方案：browser-storage.js

代碼值得優化的地方，根據不一樣瀏覽器選擇方案時，應該在初始化時實例不一樣的對象，調用相同的接口方法，而不該該每一個方法裏面去斷定。