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 相关文章推荐
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
javascript实现日期格式转换
Dec 16 Javascript
javascript判断变量是否有值的方法
Apr 20 Javascript
JavaScript必知必会(十) call apply bind的用法说明
Jun 08 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
浅谈vue方法内的方法使用this的问题
Sep 15 Javascript
详解js静态检查工具eslint配置文件
Nov 23 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 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写MySQL数据 实现代码
2009/06/15 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP memcache在微信公众平台的应用方法示例
2017/09/13 PHP
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
XENON基于JSON变种
2010/07/27 Javascript
Javascript 浮点运算的问题分析与解决方法
2013/08/27 Javascript
cookie中的path与domain属性详解
2013/12/18 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
vue制作加载更多功能的正确打开方式
2016/10/12 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
2017/02/10 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
详解Vue中watch的高级用法
2018/05/02 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
element-ui组件中input等的change事件中传递自定义参数
2019/05/22 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
vue 实现tab切换保持数据状态
2020/07/21 Javascript
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
[51:53]完美世界DOTA2联赛决赛日 Inki vs LBZS 第二场 11.08
2020/11/10 DOTA
在Python中使用第三方模块的教程
2015/04/27 Python
wxPython窗体拆分布局基础组件
2019/11/19 Python
英国袜子店:Sock Shop
2017/01/11 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
商场主管竞聘书
2014/03/31 职场文书
先进个人事迹材料
2014/12/29 职场文书
工作能力自我评价2015
2015/03/05 职场文书
学校党支部公开承诺书
2015/04/30 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
Mysql数据库group by原理详解
2022/07/07 MySQL