Localstorage本地存储兼容函数
前言
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本地存储兼容函数的更多相关文章
- HTML5 LocalStorage 本地存储
HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就 ...
- (转载)HTML5 LocalStorage 本地存储
原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地 ...
- HTML5 LocalStorage 本地存储(转)
原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储 ...
- HTML5 localStorage本地存储
介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...
- 关于HTML5本地缓存技术LocalStorage 本地存储 和 SessionStorage
如果你想在用户访问的时候记录或者记住他们的行为,你会想到的是什么,cookie 和session.但今天告诉你还有两种或者说是1种吧 那就是html5的 LocalStorage 本地存储和 Sess ...
- localstorage本地存储的简单使用
我们在做页面时会用到本地存储的时候,今天说说localStorage本地存储. 1.localStorage.name="老王"; //第一种设置存储本地数据的方法loc ...
- localStorage本地存储技术
localStorage 本地存储技术 本地存储技术,“不是永久的永久存储” 特点: 将数据存储到浏览器当中 存储的数据都是以字符串的形式存储的 和传统的数据库相比: 优点: 操作简单,容易学习 数据 ...
- HTML5 LocalStorage 本地存储的用法
本地存储变量b的值: localStorage.setItem("b","isaac"); 本地获取变量b的值: localStorage.getItem(&q ...
- 轻松实现localStorage本地存储
相信大家都知道HTML5提供了localStorage和sessionStorage两个新功能,基于这两个功能我们可以实现web资源的离线和会话存储,如果你现在还在用Cookie来临时存储网络资源的话 ...
随机推荐
- 单臂路由与三层交换机实现VLAN通信
不同VLAN之间相互通信的两种方式 (单臂路由.三层交换) 试验环境:东郊二楼第三机房 试验设备:Catalyst 2950-24(SW3) Cisco 2611( ...
- 9.4---集合子集(CC150)
这题非常复杂.牛客网上对应的题目对结果要求比较苛刻,所以要调整. 整体思路是:先放进去一个,然后第二个来的时候插入到已有的,并且把自己也放进去. public static ArrayList< ...
- [mysql]max_allowed_packet ,centos
在通过脚本向mysql写入大量测试数据时,出现这个问题,记录下: https://dev.mysql.com/doc/refman/5.5/en/packet-too-large.html 修改/et ...
- 解决ckeditor中文路径无法下载,无法显示图片问题
使用ckfinder上传的文件如果是中文路径,下载的时候会找不到 假如使用tomcat服务器,找到tomcat目录>conf文件夹的server.xml>用查找找到Connector这个 ...
- HTML5之sessionStorage
http://www.css88.com/archives/tag/sessionstorage http://blog.csdn.net/qxs965266509/article/details/1 ...
- vm10.0key
5F4EV-4Z0DP-XZHN9-0L95H-02V17
- CMake入门以及学习笔记
使用cef3替代chromium内核开发产品过程中,第一次接触到系统构建,使用了最常见的CMake.CMake虽然在构建系统中用的比较多,但是使用到的程序员还是很少的.现在在国内能找到的相关资料和博客 ...
- Divide and conquer:Showstopper(POJ 3484)
Showstopper 题目大意:数据挖掘是一项很困难的事情,现在要你在一大堆数据中找出某个数重复奇数次的数(有且仅有一个),而且要你找出重复的次数. 其实我一开始是没读懂题意的...主要是我理解错o ...
- ajax删除数据后刷新页面
代码如图: 理解: 发送请求后删除name 属性为 name 的data;用rem .remove删除: 删除后找到页面上app的数量:定义page = len/12+1; 找到当前页是哪一页,如果l ...
- 监控Tomcat解决方案(监控应用服务器系列文章分享)
使用JMX接口开发监控程序 ◆ 全部代码需要从零开始,代码量较大 ◆ 支持各不同版本比较麻烦,每个版本可能有差异 ◆ 可支配性强 ◆ 最重要的一个缺点是,配置比较麻烦 Tomcat激活JMX远 ...