web基于浏览器的本地存储方法应用


Posted in Javascript onNovember 27, 2012

在客户端存储数据时,我们一般都用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打开时就获取不到了。
Javascript 相关文章推荐
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
Jquery知识点三 jquery表单对象操作
Jan 17 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
原生js实现购物车功能
Sep 23 Javascript
extjs 04_grid 单击事件新发现
Nov 27 #Javascript
javascript 正则表达式相关应介绍
Nov 27 #Javascript
javascript 二进制运算技巧解析
Nov 27 #Javascript
JavaScript prototype属性深入介绍
Nov 27 #Javascript
Knockoutjs的环境搭建教程
Nov 26 #Javascript
jquery ajax请求实例深入解析
Nov 26 #Javascript
jquery validate poshytip 自定义样式
Nov 26 #Javascript
You might like
WHOIS类的修改版
2006/10/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
PHP读取文件的常见几种方法
2016/11/03 PHP
一些javascript一些题目的解析
2010/12/25 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
jquery库文件略庞大用纯js替换jquery的方法
2014/08/12 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JavaScript获取网页表单提交方式的方法
2015/04/02 Javascript
浅谈JQ中mouseover和mouseenter的区别
2016/09/13 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
canvas知识总结
2017/01/25 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
关于JavaScript数组去重的一些理解汇总
2020/09/10 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[02:02]2018DOTA2亚洲邀请赛Mineski赛前采访
2018/04/04 DOTA
Python实现读取目录所有文件的文件名并保存到txt文件代码
2014/11/22 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
详解python statistics模块及函数用法
2019/10/27 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
聊聊python中的异常嵌套
2020/09/01 Python
安全生产检讨书
2014/01/21 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
主办会计岗位职责
2014/03/13 职场文书
竞聘上岗演讲
2014/05/19 职场文书
排查整治工作方案
2014/06/09 职场文书
检讨书格式
2015/05/07 职场文书
推销搭讪开场白
2015/05/28 职场文书
2015中学政教处工作总结
2015/07/22 职场文书