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 中的事件教程
Apr 05 Javascript
JavaScript面象对象设计
Apr 28 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
js校验表单后提交表单的三种方法总结
Feb 28 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
JavaScript中return用法示例
Nov 29 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
vue-router实现嵌套路由的讲解
Jan 19 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
PHP里8个鲜为人知的安全函数分析
2014/12/09 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
js事件绑定快捷键以ctrl+k为例
2014/09/30 Javascript
JavaScript函数详解
2014/11/17 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
javascript html实现网页版日历代码
2016/03/08 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
2017/01/09 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
详解vuex结合localstorage动态监听storage的变化
2018/05/03 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
2020/07/15 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
2020/09/11 Javascript
python处理图片之PIL模块简单使用方法
2015/05/11 Python
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
python实现智能语音天气预报
2019/12/02 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Python加速程序运行的方法
2020/07/29 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
Pycharm plot独立窗口显示的操作
2020/12/11 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
在线服装零售商:SheIn
2016/07/22 全球购物
财务主管的岗位职责
2013/12/30 职场文书
校园之声广播稿
2014/01/31 职场文书
500字小学生检讨书
2015/02/19 职场文书
生活委员竞选稿
2015/11/21 职场文书
Python开发五子棋小游戏
2022/04/28 Python