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 相关文章推荐
IE6下opacity与JQuery的奇妙结合
Mar 01 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
javascript+canvas实现刮刮卡抽奖效果
Jul 29 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
iview tabs 顶部导航栏和模块切换栏的示例代码
Mar 04 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 Javascript
Vue列表循环从指定下标开始的多种解决方案
Apr 08 Javascript
JavaScript 事件捕获冒泡与捕获详情
Nov 11 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中利用XML技术构造远程服务(下)
2006/10/09 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
javascript 在网页中的运用(asp.net)
2009/11/23 Javascript
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
jquery delay()介绍及使用指南
2014/09/02 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
[05:56]第十六期——新进3大C之小兔基
2014/06/24 DOTA
[04:59]2018DOTA2亚洲邀请赛 4.7 Mineski夺冠时刻
2018/04/09 DOTA
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
Python实现信用卡系统(支持购物、转账、存取钱)
2016/06/24 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python之Class&Object用法详解
2019/12/25 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
sklearn+python:线性回归案例
2020/02/24 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
python学生管理系统的实现
2020/04/05 Python
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
益模软件Java笔试题
2012/03/27 面试题
高中班主任评语
2014/12/30 职场文书
2019升学宴主持词范本5篇
2019/10/09 职场文书
MySQL表的增删改查(基础)
2021/04/05 MySQL
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers