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调用webService远程访问出错的解决方法
May 21 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
window.open()详解及浏览器兼容性问题示例探讨
May 29 Javascript
为什么JS中eval处理JSON数据要加括号
Apr 13 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 Javascript
JS寄快递地址智能解析的实现代码
Jul 16 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 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中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP生成不重复随机数的方法汇总
2014/11/19 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
PHP解耦的三重境界(浅谈服务容器)
2017/03/13 PHP
Ajax中的JSON格式与php传输过程全面解析
2017/11/14 PHP
基于 Swoole 的微信扫码登录功能实现代码
2018/01/15 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
解决laravel(5.5)访问public报错的问题
2019/10/12 PHP
JavaScript的Module模式编程深入分析
2013/08/13 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
2016/03/31 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
详解从Vue-router到html5的pushState
2018/07/21 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
如何给Python代码进行加密
2020/01/10 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
了解一下python内建模块collections
2020/09/07 Python
用python制作个音乐下载器
2021/01/30 Python
python在协程中增加任务实例操作
2021/02/28 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
大学生护理专业自荐信
2013/10/03 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
银行求职信
2014/05/31 职场文书
机关干部四风问题自查报告及整改措施
2014/10/26 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
python flask框架快速入门
2021/05/14 Python