前言
HTML5提供了本地存储的API：localstorage对象和sessionStorage对象，实现将数据存储到用户的电脑上。Web存储易于使用、支持大容量（但非无限量）数据同时存储，同时兼容当前所有主流浏览器，但不兼容早期浏览器。
存储API
localStorage和sessionStorage通常被当做普通的JavaScript对象使用：通过设置属性来存储字符串值，查询该属性来读取该值。除此之外，这两个对象还提供了更加正式的API。
- 调用setItem()方法，将对应的名字和值传递出去，可以实现数据存储
- 调用getItem()方法，将名字传递出去，可以获取对应的值
- 调用removeItem()方法，名称作为参数，可以删除对应的数据
- 调用clear()方法，可以删除所有存储的数据
- 使用length属性以及key()方法，传入0~length-1的数字，可以枚举所有存储数据的名字
|
1 2 3 4 5 6 7 8 9 10 11 |
localStorage.setItem("name", "xuanfeng"); // 以"name"为名字存储一个字符串 localStorage.getItem("name"); // 获取"name"的值 // 枚举所有存储的名字/值对 for(var i=0; i<localStorage.length; i++){ // length表示所有的名值对总数 var name = localStorage.key(i); // 获取第i对的名字 var value = localStorage.getItem(name); // 获取该对的值 } localStorage.removeItem("name"); // 删除"name"项 localAStorage.clear(); // 全部删除 |
IE User Data
微软在IE5及之后的IE浏览器中实现了它专属的客户端存储机制——“userData”。
userData可以实现一定量的字符串数据存储，对于IE8以前的IE浏览器中，可以将其用作是Web存储的替代方案。
iLocalStorage插件
由于IE8以下浏览器的本地存储API不一样，所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下：
|
1 2 3 4 5 6 7 |
getItem: 获取属性 setItem: 设置属性 removeItem: 删除属性 iLocalStorage.setItem('key', 'value'); console.log(iLocalStorage.getItem('key')); iLocalStorage.removeItem('key'); |
插件代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
/* * 名称：本地存储函数 * 功能：兼容各大浏览器存储 * 作者：轩枫 * 日期：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
