Localstorage本地存储兼容函数

前言
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);
原文地址:https://www.cnblogs.com/joyco773/p/5454459.html