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 的元素。varstoreElement;//在当前域的根路径创建一个文档，并在此文档中创建用来保存 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);returnstoreElement.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