前言
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<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不一样,所以就写了个插件兼容各大浏览器存储。提供的方法及用法如下:
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);

Localstorage本地存储兼容函数的更多相关文章

  1. HTML5 LocalStorage 本地存储

    HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...

  2. (转载)HTML5 LocalStorage 本地存储

    原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...

  3. HTML5 LocalStorage 本地存储(转)

    原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...

  4. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  5. 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage

    如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...

  6. localstorage本地存储的简单使用

    我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储. 1.localStorage.name="老王";      //第一种设置存储本地数据的方法loc ...

  7. localStorage本地存储技术

    localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...

  8. HTML5 LocalStorage 本地存储的用法

    本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...

  9. 轻松实现localStorage本地存储

    相信大家都知道HTML5提供了localStorage和sessionStorage两个新功能,基于这两个功能我们可以实现web资源的离线和会话存储,如果你现在还在用Cookie来临时存储网络资源的话 ...

随机推荐

  1. BZOJ 1485: [HNOI2009]有趣的数列

    Description 求长度为 \(2n\) 的序列.要求 1. \(a_1<a_3<a_5<...<a_{2n-1}\) . 2. \(a_2<a_4<a_6& ...

  2. JavaScript之函数

    控制语句(switch) switch(name){ case '1': age = 123; break; case '2': age = 456; break; case '3': age = 7 ...

  3. replace、replaceAll、replaceFirst的区别详解

    String s = "my.test.txt"; System.out.println(s.replace(".", "#")); Sys ...

  4. SQL Server被锁的表以及解锁

    select   request_session_id   spid,OBJECT_NAME(resource_associated_entity_id) tableName   from   sys ...

  5. C++中的结构体

    http://zhidao.baidu.com/link?url=8OYQSKV9mvSBc6Hkf9NsLQmipSge9VCZDJQGAZZs5PCBQ54UTmK98VRmAklEEAFYu7d ...

  6. poj 2251

    http://poj.org/problem?id=2251 一道简单的BFS,只不过是二维数组,变三维数组,也就在原来基础上加了两个方向. 题意就是从S走到E,#不能走. #include < ...

  7. Linux下查看某一进程所占用内存的方法

    Linux下查看某一个进程所占用的内存,首先可以通过ps命令找到进程id,比如 ps -ef | grep kafka 可以看到kafka这个程序的进程id 可以看到是2913,现在可以使用如下命令查 ...

  8. nginx服务器设置url的优雅链接

    对于LNMP这样架构的网站来说,一般都是基于php框架开发,php框架一般都会讲究优雅链接,比如Laravel,CodeIgniter,ThinkPHP等都是支持这种链接模式的,在服务器配置上也叫作u ...

  9. 【Android Studio错误】 If you are behind an HTTP proxy, please configure the proxy settings either in IDE or Gradle.

    解决办法:以管理员身份运行cmd窗口,输入命令“netsh winsock reset” netsh winsock reset命令,作用是重置 Winsock 目录.如果一台机器上的Winsock协 ...

  10. HDU 4865 Peter's Hobby(概率、dp、log)

    给出2个影响矩阵,一个是当天天气对湿度的影响,一个是前一天天气对当天天气的影响. 即在晴天(阴天.雨天)发生Dry(Dryish.Damp.Soggy)的概率,以及前一天晴天(阴天.雨天)而今天发生晴 ...