前言

HTML5提供了本地存储的API：localstorage对象和sessionStorage对象，实现将数据存储到用户的电脑上。Web存储易于使用、支持大容量（但非无限量）数据同时存储，同时兼容当前所有主流浏览器，但不兼容早期浏览器。

存储API

localStorage和sessionStorage通常被当做普通的JavaScript对象使用：通过设置属性来存储字符串值，查询该属性来读取该值。除此之外，这两个对象还提供了更加正式的API。

• 调用setItem()方法，将对应的名字和值传递出去，可以实现数据存储
• 调用getItem()方法，将名字传递出去，可以获取对应的值
• 调用removeItem()方法，名称作为参数，可以删除对应的数据
• 调用clear()方法，可以删除所有存储的数据
• 使用length属性以及key()方法，传入0~length-1的数字，可以枚举所有存储数据的名字

localStorage.setItem("name", "xuanfeng");	// 以"name"为名字存储一个字符串
localStorage.getItem("name");			// 获取"name"的值

// 枚举所有存储的名字/值对
for(var i=0; i

 IE User Data

微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——“userData”。

userData可以实现一定量的字符串数据存储，对于IE8以前的IE浏览器中，可以将其用作是Web存储的替代方案。

iLocalStorage插件

由于IE8以下浏览器的本地存储API不一样，所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下：

getItem: 获取属性
setItem: 设置属性
removeItem: 删除属性

iLocalStorage.setItem('key', 'value');
console.log(iLocalStorage.getItem('key'));
iLocalStorage.removeItem('key');

插件代码

/*
* 名称：本地存储函数
* 功能：兼容各大浏览器存储
* 作者：轩枫
* 日期：2015/06/11
* 版本：V2.0
*/
 
/**
 * LocalStorage 本地存储兼容函数
 * getItem: 获取属性
 * setItem: 设置属性
 * removeItem: 删除属性
 *
 *
 * @example
 *
	iLocalStorage.setItem('key', 'value');
	console.log(iLocalStorage.getItem('key'));
	iLocalStorage.removeItem('key');
 *
 */
 
 
(function(window, document){
 
	// 1. IE7下的UserData对象
	var UserData = {
		userData: null,
		name: location.href,
		init: function(){
			// IE7下的初始化
			if(!UserData.userData){
				try{
					UserData.userData = document.createElement("INPUT");
					UserData.userData.type = "hidden";
					UserData.userData.style.display = "none";
					UserData.userData.addBehavior("#default#userData");
					document.body.appendChild(UserData.userData);
					var expires = new Date();
					expires.setDate(expires.getDate() + 365);
					UserData.userData.expires = expires.toUTCString();
				} catch(e){
					return false;
				}
			}
			return true;
		},
 
		setItem: function(key, value){
			if(UserData.init()){
				UserData.userData.load(UserData.name);
				UserData.userData.setAttribute(key, value);
				UserData.userData.save(UserData.name);
			}
		},
 
		getItem: function(key){
			if(UserData.init()){
				UserData.userData.load(UserData.name);
				return UserData.userData.getAttribute(key);
			}
		},
 
		removeItem: function(key){
			if(UserData.init()){
				UserData.userData.load(UserData.name);
				UserData.userData.removeAttribute(key);
				UserData.userData.save(UserData.name);
			}
		}
 
	};
 
	// 2. 兼容只支持globalStorage的浏览器
	// 使用： var storage = getLocalStorage();
	function getLocalStorage(){
		if(typeof localStorage == "object"){
			return localStorage;
		} else if(typeof globalStorage == "object"){
			return globalStorage[location.href];
		} else if(typeof userData == "object"){
			return globalStorage[location.href];
		} else{
			throw new Error("不支持本地存储");
		}
	}
	var storage = getLocalStorage();
 
	function iLocalStorage(){
 
	}
 
	// 高级浏览器的LocalStorage对象
	iLocalStorage.prototype = {
		setItem: function(key, value){
			if(!window.localStorage){
				UserData.setItem(key, value);
			}else{
				storage.setItem(key, value);
			}
		},
 
		getItem: function(key){
			if(!window.localStorage){
				return UserData.getItem(key);
			}else{
				return storage.getItem(key);
			}
		},
 
		removeItem: function(key){
			if(!window.localStorage){
				UserData.removeItem(key);
			}else{
				storage.removeItem(key);
			}
		}
	}
 
 
	if (typeof module == 'object') {
	    module.exports = new iLocalStorage();
	}else {
	    window.iLocalStorage = new iLocalStorage();
	}
 
})(window, document);

其他插件

localForage：https://github.com/mozilla/localForage

store.js：https://github.com/marcuswestin/store.js