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