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 相关文章推荐
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
js性能优化 如何更快速加载你的JavaScript页面
Mar 17 Javascript
jquery给图片添加鼠标经过时的边框效果
Nov 12 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
js实现动态改变radio状态的方法
Feb 28 Javascript
koa上传excel文件并解析的实现方法
Aug 09 Javascript
微信小程序分享海报生成的实现方法
Dec 10 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 Javascript
vue引入Excel表格插件的方法
Apr 28 Vue.js
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设计模式 Observer(观察者模式)
2011/06/26 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
如何在php中正确的使用json
2013/08/06 PHP
smarty简单入门实例
2014/11/28 PHP
变量在 PHP7 内部的实现(一)
2015/12/21 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP7 错误处理机制修改
2021/03/09 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
json-lib出现There is a cycle in the hierarchy解决办法
2010/02/24 Javascript
Javascript实现禁止输入中文或英文的例子
2014/12/09 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
2015/12/26 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
2016/11/09 Javascript
Vue.js教程之计算属性
2016/11/11 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
Vue进度条progressbar组件功能
2018/04/17 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
浅谈layui 绑定form submit提交表单的注意事项
2019/10/25 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
Django中使用Celery的方法步骤
2020/12/07 Python
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
英文版区域经理求职信
2013/10/23 职场文书
建筑投标担保书
2014/05/20 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
清明祭英烈活动总结
2015/05/11 职场文书
葬礼主持词
2015/07/02 职场文书
2016年党员创先争优公开承诺书
2016/03/25 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js
nginx部署多前端项目的几种方法
2021/05/25 Servers