前言
HTML5提供了本地存储的API：localstorage对象和sessionStorage对象，实现将数据存储到用户的电脑上。Web存储易于使用、支持大容量（但非无限量）数据同时存储，同时兼容当前所有主流浏览器，但不兼容早期浏览器。
存储API
localStorage和sessionStorage通常被当做普通的JavaScript对象使用：通过设置属性来存储字符串值，查询该属性来读取该值。除此之外，这两个对象还提供了更加正式的API。
调用setItem()方法，将对应的名字和值传递出去，可以实现数据存储
调用getItem()方法，将名字传递出去，可以获取对应的值
调用removeItem()方法，名称作为参数，可以删除对应的数据
调用clear()方法，可以删除所有存储的数据
使用length属性以及key()方法，传入0~length-1的数字，可以枚举所有存储数据的名字
1 localStorage.setItem("name", "xuanfeng"); // 以"name"为名字存储一个字符串 2 localStorage.getItem("name"); // 获取"name"的值 3 4 // 枚举所有存储的名字/值对 5 for(var i=0; i<localStorage.length; i++){ // length表示所有的名值对总数 6 var name = localStorage.key(i); // 获取第i对的名字 7 var value = localStorage.getItem(name); // 获取该对的值 8 } 9 10 localStorage.removeItem("name"); // 删除"name"项 11 localAStorage.clear(); // 全部删除
IE User Data
微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——“userData”。
userData可以实现一定量的字符串数据存储，对于IE8以前的IE浏览器中，可以将其用作是Web存储的替代方案。
iLocalStorage插件
由于IE8以下浏览器的本地存储API不一样，所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下：
1 getItem: 获取属性 2 setItem: 设置属性 3 removeItem: 删除属性 4 iLocalStorage.setItem('key', 'value'); 5 console.log(iLocalStorage.getItem('key')); 6 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');
*
*/
1 (function(window, document){ 2 3 // 1. IE7下的UserData对象 4 var UserData = { 5 userData: null, 6 name: location.href, 7 init: function(){ 8 // IE7下的初始化 9 if(!UserData.userData){ 10 try{ 11 UserData.userData = document.createElement("INPUT"); 12 UserData.userData.type = "hidden"; 13 UserData.userData.style.display = "none"; 14 UserData.userData.addBehavior("#default#userData"); 15 document.body.appendChild(UserData.userData); 16 var expires = new Date(); 17 expires.setDate(expires.getDate() + 365); 18 UserData.userData.expires = expires.toUTCString(); 19 } catch(e){ 20 return false; 21 } 22 } 23 return true; 24 }, 25 setItem: function(key, value){ 26 if(UserData.init()){ 27 UserData.userData.load(UserData.name); 28 UserData.userData.setAttribute(key, value); 29 UserData.userData.save(UserData.name); 30 } 31 }, 32 getItem: function(key){ 33 if(UserData.init()){ 34 UserData.userData.load(UserData.name); 35 return UserData.userData.getAttribute(key); 36 } 37 }, 38 removeItem: function(key){ 39 if(UserData.init()){ 40 UserData.userData.load(UserData.name); 41 UserData.userData.removeAttribute(key); 42 UserData.userData.save(UserData.name); 43 } 44 } 45 }; 46 47 // 2. 兼容只支持globalStorage的浏览器 48 // 使用： var storage = getLocalStorage(); 49 function getLocalStorage(){ 50 if(typeof localStorage == "object"){ 51 return localStorage; 52 } else if(typeof globalStorage == "object"){ 53 return globalStorage[location.href]; 54 } else if(typeof userData == "object"){ 55 return globalStorage[location.href]; 56 } else{ 57 throw new Error("不支持本地存储"); 58 } 59 } 60 var storage = getLocalStorage(); 61 function iLocalStorage(){ 62 63 } 64 // 高级浏览器的LocalStorage对象 65 iLocalStorage.prototype = { 66 setItem: function(key, value){ 67 if(!window.localStorage){ 68 UserData.setItem(key, value); 69 }else{ 70 storage.setItem(key, value); 71 } 72 }, 73 getItem: function(key){ 74 if(!window.localStorage){ 75 return UserData.getItem(key); 76 }else{ 77 return storage.getItem(key); 78 } 79 }, 80 removeItem: function(key){ 81 if(!window.localStorage){ 82 UserData.removeItem(key); 83 }else{ 84 storage.removeItem(key); 85 } 86 } 87 } 88 if (typeof module == 'object') { 89 module.exports = new iLocalStorage(); 90 }else { 91 window.iLocalStorage = new iLocalStorage(); 92 } 93 94 })(window, document);