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来临时存储网络资源的话 ...
随机推荐
- 2016年11月19日--连接查询,变量、if else、while
连接查询:通过连接运算符可以实现多个表查询.连接是关系数据库模型的主要特点,也是它区别于其它类型数据库管理系统的一个标志. 常用的两个链接运算符: 1.join on 2.union 在关 ...
- BZOJ 1090: [SCOI2003]字符串折叠
Sol 区间DP. 转移很简单,枚举会形成的断长转移就行,话说上一题我就跟这个是差不多的思路,转移改了改,然后死活过不了... 同样都是SCOI的题...相差4年... Code /********* ...
- 11.1---有序数组合并(CC150)
这道题比较简单,就是通过从后往前复制大的就可以了.最后比较注意的就是如果B还没复制完要记得接着复制. import java.util.Arrays; public class Solution{ p ...
- nginx 下 bootstrap fa 字体异常问题
server { listen 8082; # server_name 192.168.16.88; # root /home/ywt/workspace/kuF/web/statics; # aut ...
- 修改apache上传文件大小限制
PHP上传文件大小限制解决方法: 第一: 在php.ini里面查看如下行: upload_max_filesize = 8M post_max_size = 10M memory_limi ...
- AngularJS之Provider, Value, Constant, Service, Factory, Decorator的区别与详解
本文转载自http://camnpr.com/javascript/1693.html 首先,provider, value, constant, service, factory他们都是provid ...
- 【leetcode】Partition List
Partition List Given a linked list and a value x, partition it such that all nodes less than x come ...
- 指针 与 数组 以及 a 与 &a的区别
指针 与数组 并没有什么关系, 指针就是指针,指针变量在32位系统下,永远占4个byte,其值为某一个内存的地址,指针可以指向任何地方,但是不是任何地方你都能通过这个指针变量访问到; 数组 ...
- Call to undefined function mysql_connnect()
PHP Fatal error: Call to undefined function mysql_connnect() in /var/www/html/mysqltest.php on line ...
- MyISAM 调度(优先级)的一些优化【转】
MySQL的MyISAM引擎现在越来越被淡化了,但是还是有必要再温习总结一下的. 允许你改变语句调度的优先级,它可以使来自多个客户端的查询更好地协作,这样单个客户端就不会由于锁定而等待很长时间.改变优 ...