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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
javascript 变量作用域 代码分析
Jun 26 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
js+jquery实现图片裁剪功能
Jan 02 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
JQuery判断正整数整理小结
Aug 21 jQuery
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
js实现特别简单的钟表效果
Sep 14 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 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
Cakephp 执行主要流程
2010/03/24 PHP
114啦源码(114la)不能生成地方房产和地方报刊问题4级页面0字节的解决方法
2012/01/12 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP开启opcache提升代码性能
2015/04/26 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
2014/08/01 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
Js使用WScript.Shell对象执行.bat文件和cmd命令
2014/12/18 Javascript
js实现用户注册协议倒计时的方法
2015/01/21 Javascript
JavaScript中的this,call,apply使用及区别详解
2016/01/29 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
NodeJS 实现手机短信验证模块阿里大于功能
2017/06/19 NodeJs
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
JavaScript同源策略和跨域访问实例详解
2018/04/03 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
Python计算字符宽度的方法
2016/06/14 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
使用python实现画AR模型时序图
2019/11/20 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
美国围栏公司:Walpole Outdoors
2019/11/19 全球购物
应届毕业生就业自荐信
2013/10/26 职场文书
大学生志愿者感言
2014/01/15 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
2014年安全生产责任书
2014/07/22 职场文书
党员个人整改措施
2014/10/24 职场文书
个人年终总结范文
2015/03/09 职场文书
mysql备份策略的实现(全量备份+增量备份)
2021/07/07 MySQL