前言
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. 【smarty项目源码】模拟smarty模版文件的解析过程

    <?php class MyMiniSmarty{ //模版文件的存放路径 var $template_dir="./templates/"; //编译文件的存放路径 ,编译 ...

  2. 【Java】Java 深入探讨 单例模式的实现

    在GoF的23种设计模式中,单例模式是比较简单的一种.然而,有时候越是简单的东西越容易出现问题.下面就单例设计模式详细的探讨一下.   所谓单例模式,简单来说,就是在整个应用中保证只有一个类的实例存在 ...

  3. 深入理解学习Git工作流

    http://blog.csdn.net/hongchangfirst/article/list/3 //可以看看 http://blog.csdn.net/hongchangfirst/articl ...

  4. C# 接口基础

     接口只包含方法.属性.事件或索引器的签名. 实现接口的类或结构必须实现接口定义中指定的接口成员 接口中可以包含字段吗? 第一次被问到这个问题的时候被问愣住了,只能回答:印象当中没见过在接口中定义变量 ...

  5. POJ 2503

    http://poj.org/problem?id=2503 题意就是字典翻译.这个输入输出真心恶心,要不是看discuss我肯定是解决不了,还用上了sscanf函数.... 这道题我用几种方法做. ...

  6. springMVC中文乱码问题

    1)中文JSP页面编码统一为UTF-8后,页面可以正常显示,但从数据库中获取的数据依然显示乱码(比如下拉表单的数据): 2)当使用了springMVC提供的编码Filter拦截处理后,表单数据.从数据 ...

  7. Unity3d 解析文本执行已注册的自定函数

    最近有个需求是想让程序解析策划编辑一个文本生成一段CG,内容使用大致是这样 cgSetCameraEx(118.6324,30.71189,75.55666,45,-45,0,0) cgCloneMy ...

  8. 8.SpringMVC参数传递

    页面参数传递到controller, 可被同名(与页面标签上的name名对应)的参数接收,用request设值,页面再取出来. 注意乱码解决办法: ①如果是get提交,则在tomcat的server. ...

  9. AFNetWorking支持解析html的方法

    在AFURLResponseSeriallzation.m的226行 手动添加@"text/html" 添加之前解锁文件

  10. 士兵杀敌(三)_RMQ(区间最值查询)

    士兵杀敌(三) 时间限制:2000 ms  |  内存限制:65535 KB 难度:5   描述 南将军统率着N个士兵,士兵分别编号为1~N,南将军经常爱拿某一段编号内杀敌数最高的人与杀敌数最低的人进 ...