HTML5本地存儲localstorage

localStorage的用途

localStorage基本上就是三個特色：

1. 數據永久被保存在本地，即便瀏覽器被關閉，數據也不會消失
2. 存儲空間大，通常爲5~10M
3. 存儲的內容不會和服務器發生任何交互（cookie就會隨着請求發送給server）

所以，當你須要持久的存儲用戶的數據，而且不和服務器交互時，就可使用localStorage。我的想到的就是在本地保存用戶的登陸狀態，保存用戶的瀏覽記錄，以及一些插件設置等等，或者換句話說，之前用cookie的地方如今基本上均可以使用localStorage進行替代。

localStorage的操做

localStorage是以(Key,Value)的形式進行設置和讀取的，它的操做也很是的簡單。

localStorage.length: 返回如今已經存儲的變量數目。
localStorage.key(n): 返回第n個變量的鍵值(key)。
localStorage.getItem(k): 和localStorage.k同樣，取得鍵值爲k的變量的值。
localStorage.setItem(k , v): 和localStorage.k = v同樣，設置鍵值k的變量值。
localStorage.removeItem(k): 刪除鍵值爲k的變量。
localStorage.clear(): 清空全部變量。

在Chrome中，localStorage是以文件的形式存儲的，存儲路徑爲：C:\Users\UserName\AppData\Local\Google\Chrome\User Data\Default\Local Storage。文件名通常爲domain_number.localstorage

localStorage的兼容性

 

能夠看出，並非全部的瀏覽器都支持localStorage的，好比IE6和IE7。說到這裏，就不得不說一下本地存儲的進化歷程，從下圖能夠對比出localStorage的優點和來之不易：

cookie的主要問題是容量過小了；userData的問題是隻針對IE+Windows的組合；Flash的問題是須要引入swf等相關文件；Gears是谷歌提出的方案，已經中止更新了。

所以，咱們主要仍是要使用UserData來處理IE6-7的本地存儲。

userData使用

 userData聲明語法：

XML	<Prefix: CustomTag ID=sID STYLE="behavior:url('#default#userData')" />
HTML	<ELEMENT STYLE="behavior:url('#default#userData')" ID=sID>
Scripting	object .style.behavior = "url('#default#userData')"
	object .addBehavior ("#default#userData")

userData經常使用方法：

Method	Description
getAttribute	Retrieves the value of the specified attribute.
load	Loads an object participating in userData persistence from a UserData store.
removeAttribute	Removes the specified attribute from the object.
save	Saves an object participating in userData persistence to a UserData store.
setAttribute	Sets the value of the specified attribute.

詳細使用方法請看：http://msdn.microsoft.com/en-us/library/ms531424(v=vs.85).aspx

OurJS對不一樣瀏覽器下localStorage進行了統一封裝：

if (window.localStorage || !document.documentElement.addBehavior || location.protocol === 'file:') {
    return;
  }

  /**
   * 爲不支持 localStorage 的瀏覽器提供相似的功能。
   * @name localStorage
   * @namespace
   * @description
   *   在不支持 localStorage 的瀏覽器中，會使用路徑 '/favicon.ico' 來建立啓用 userData 的元素。應保證上述路徑存在，以避免出現預料外的異常。
   *   userData 的尺寸限制爲每文件 128KB，每域 1024KB；受限站點每文件 64KB，每域 640KB。
   */
  var localStorage = window.localStorage = {};

  // 指定一個固定的 userData 存儲文件名。
  var STORE_NAME = 'localStorage';

  // 用來保存 userData 的元素。
  var storeElement;

  // 在當前域的根路徑建立一個文檔，並在此文檔中建立用來保存 userData 的元素。
  try {
    // 使用這種方式（而不是在當前文檔內直接插入 IFRAME 元素）能夠避免在 IE6 的應用代碼中調用 document.write 時出現「已終止操做」的異常。
    // http://www.cnblogs.com/my_life/articles/2749709.html: 推技術ActiveXobject("htmlfile") 長鏈接
    var storeContainerDocument = new ActiveXObject('htmlfile'); //建立對象
    storeContainerDocument.open(); //打開
    storeContainerDocument.write('<iframe id="store" src="/favicon.ico"></iframe>'); //添加
    storeContainerDocument.close(); //關閉
    // IE6 IE7 IE8 容許在 document 上插入元素，能夠確保代碼的同步執行。
    var storeDocument = storeContainerDocument.getElementById('store').contentWindow.document;
    storeElement = storeDocument.appendChild(storeDocument.createElement('var'));
  } catch (e) {
    // 若建立失敗，則僅實現不能跨路徑的 userData 訪問。
    storeElement = document.documentElement;
  }
  // 添加行爲。
  storeElement.addBehavior('#default#userData');

//--------------------------------------------------[localStorage.getItem]
  /**
   * 從 localStorage 中讀取一條數據。
   * @name localStorage.getItem
   * @function
   * @param {string} key 數據名。
   * @returns {?string} 數據值。
   *   若是指定的數據名不存在，返回 null。
   */
  localStorage.getItem = function(key) {
    storeElement.load(STORE_NAME);
    return storeElement.getAttribute(key);
  };

//--------------------------------------------------[localStorage.setItem]
  /**
   * 在 localStorage 中保存一條數據。
   * @name localStorage.setItem
   * @function
   * @param {string} key 數據名，不能爲空字符串。
   * @param {string} value 數據值。
   * @description
   *   注意：與原生的 localStorage 不一樣，IE6 IE7 的實現不容許 `~!@#$%^&*() 等符號出如今 key 中，可使用 . 和 _ 符號，但不能以 . 和數字開頭。
   */
  localStorage.setItem = function(key, value) {
    storeElement.load(STORE_NAME);
    storeElement.setAttribute(key, value);
    storeElement.save(STORE_NAME);
  };

//--------------------------------------------------[localStorage.removeItem]
  /**
   * 從 localStorage 中刪除一條數據。
   * @name localStorage.removeItem
   * @function
   * @param {string} key 數據名。
   */
  localStorage.removeItem = function(key) {
    storeElement.load(STORE_NAME);
    storeElement.removeAttribute(key);
    storeElement.save(STORE_NAME);
  };

//--------------------------------------------------[localStorage.clear]
  /**
   * 清空 localStorage 中的全部數據。
   * @name localStorage.clear
   * @function
   */
  localStorage.clear = function() {
    var attributes = Array.from(storeElement.XMLDocument.documentElement.attributes);
    storeElement.load(STORE_NAME);
    attributes.forEach(function(attribute) {
      storeElement.removeAttribute(attribute.name);
    });
    storeElement.save(STORE_NAME);
  };

總之就是先建立一個userData對象，而後使用它的操做封裝到localStorage的一些方法裏面。

 

參考資料：

【OurJS】: https://github.com/s79/OurJS/blob/gh-pages/src/browser.js

【推技術ActiveXobject("htmlfile") 長鏈接】: http://www.cnblogs.com/my_life/articles/2749709.html

【JavaScript本地存儲實踐】: http://www.css88.com/archives/3717