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的一些特性和用法整理小结
Jan 13 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
js控制网页背景音乐播放与停止的方法
Feb 06 Javascript
TypeOf这些知识点你了解吗
Feb 21 Javascript
D3.js实现饼状图的方法详解
Sep 21 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
Sep 17 Javascript
Node.js 的 GC 机制详解
Jun 03 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 Javascript
一篇文章看懂JavaScript中的回调
Jan 05 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 什么是PEAR?
2009/03/19 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
2016/06/02 Javascript
跨域请求的完美解决方法(JSONP, CORS)
2016/06/12 Javascript
react-redux中connect的装饰器用法@connect详解
2018/01/13 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
Python 连连看连接算法
2008/11/22 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
python 获取当天每个准点时间戳的实例
2018/05/22 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
Tensorflow 实现将图像与标签数据转化为tfRecord文件
2020/02/17 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
HTML中使用SVG与SVG预定义形状元素介绍
2013/06/28 HTML / CSS
美国职棒大联盟的官方手套、球和头盔:Rawlings
2020/02/15 全球购物
美国电子产品购物网站:BuyDig.com
2020/06/17 全球购物
部队领导证婚词
2014/01/12 职场文书
企业节能减排实施方案
2014/03/19 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
七一建党节演讲稿
2014/09/11 职场文书
先进班组材料范文
2014/12/25 职场文书
python如何进行基准测试
2021/04/26 Python
Python编写冷笑话生成器
2022/04/20 Python