JavaScript本地存儲實踐

1、各種存儲方案的對比

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

2、Cookie的缺點

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

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

3、LocalStorage的缺點

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

4、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();

5、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

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