web基于浏览器的本地存储方法应用
更新时间：2012年11月27日 15:24:48 作者：
在客户端存储数据时，我们一般都用cookie(不敏感数据)，但是在客户端越来越富的今天，cookie可存储的量(每个域最大4k)实在是小,已经满足不了我们的需求
在客户端存储数据时，我们一般都用cookie(不敏感数据)，但是在客户端越来越富的今天，cookie可存储的量(每个域最大4k)实在是小。
在HTML5中有localStorage可使用，但是这就抛弃了IE8-。为了兼容，我们可以翻出IE很久以前就搞的一个存储方法：
给一个元素添加一个特殊的样式url(#default#userData)，之后就可以通过setAttribute和getAttribute来存取键值对形式的数据了。
要注意的一点就是在数据改变后要使用save方法，而数据加载初期要load。
接下来就贴上使用方法，当使用的浏览器支持HTML5时，就使用localStorage。
var localStorage = (function(db) {
if (typeof db.clear == "function") {
return db;
}
var database = document.createElement("div")
database.id = "database";
database.style.behavior = "url(#default#userData)";
document.body.appendChild(database);
database.load("DataStore");
return {
setItem: function(key, val) {
database.setAttribute(key, val);
database.save("DataStore");
}
, getItem: function(key) {
return database.getAttribute(key);
}
, removeItem: function(key) {
database.removeAttribute(key);
database.save("DataStore");
}
};
} (localStorage || {}));
不过就算兼容了 还是会有问题存在，例如在IE上存储的信息，通过Chrome打开时就获取不到了。
在HTML5中有localStorage可使用，但是这就抛弃了IE8-。为了兼容，我们可以翻出IE很久以前就搞的一个存储方法：
给一个元素添加一个特殊的样式url(#default#userData)，之后就可以通过setAttribute和getAttribute来存取键值对形式的数据了。
要注意的一点就是在数据改变后要使用save方法，而数据加载初期要load。
接下来就贴上使用方法，当使用的浏览器支持HTML5时，就使用localStorage。
复制代码 代码如下:
var localStorage = (function(db) {
if (typeof db.clear == "function") {
return db;
}
var database = document.createElement("div")
database.id = "database";
database.style.behavior = "url(#default#userData)";
document.body.appendChild(database);
database.load("DataStore");
return {
setItem: function(key, val) {
database.setAttribute(key, val);
database.save("DataStore");
}
, getItem: function(key) {
return database.getAttribute(key);
}
, removeItem: function(key) {
database.removeAttribute(key);
database.save("DataStore");
}
};
} (localStorage || {}));
不过就算兼容了 还是会有问题存在，例如在IE上存储的信息，通过Chrome打开时就获取不到了。
相关文章
这篇文章主要介绍了微信浏览器下拉黑边解决方案 wScroollFix,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
JS获取当前日期 YYYY-MM-DD hh-mm-ss的示例代码
在编写JavaScript代码时,遇到需要获取当前日期和时间并将其格式化为 yyyymmddhhmmss 字符串的情况,可以使用本文中介绍的几种实现方式中的任意一种,2024-02-02
这篇文章主要介绍了JS实现的两个滑块区间拖动效果代码,涉及JavaScript响应鼠标事件针对页面元素的动态操作技巧,需要的朋友可以参考下2015-10-10
最近发现现在租房还是签合同,越来越多采用电子签约的方式进行,好处不用多说节约成本,节约时间,下面我们来看看使用canvas实现电子签约完成线上签署功能2025-01-01
带有关闭功能的漂浮图片的实现方法有很多，下面为大家介绍下使用Javascript是如何实现的，喜欢的额朋友可以了解下2014-01-01
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
这篇文章主要介绍了使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
BootStrap下的弹出框加载select2框架失败的解决方法
本文通过简单的代码给大家介绍了BootStrap下的弹出框加载select2框架失败的解决方法，需要的朋友参考下吧2017-08-08
这篇文章主要为大家详细介绍了js实现圆形显示鼠标单击位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
这篇文章主要为大家详细介绍了Javascript和jQuery的深浅拷贝，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了通过JS判断网页是否为手机打开,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
最新评论