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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
Mac/Windows下如何安装Node.js
Nov 22 Javascript
jQuery DOM操作实例
Mar 05 Javascript
javascript字符串替换函数如何一次性全部替换掉
Oct 30 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
微信小程序自定义导航教程(兼容各种手机)
Dec 12 Javascript
async/await优雅的错误处理方法总结
Jan 30 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
mpvue微信小程序开发之实现一个弹幕评论
Nov 24 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
smarty巧妙处理iframe中内容页的代码
2012/03/07 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
php ajax实现文件上传进度条
2016/03/29 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
PHP中mysqli_get_server_version()的实例用法
2020/02/03 PHP
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
node结合swig渲染摸板的方法
2018/04/11 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
[04:44]DOTA2 2017全国高校联赛视频回顾
2017/08/21 DOTA
Python中的单行、多行、中文注释方法
2018/07/19 Python
python logging设置level失败的解决方法
2020/02/19 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
优秀求职信范文分享
2013/12/19 职场文书
接受捐赠答谢词
2014/01/27 职场文书
出纳担保书范文
2014/04/02 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
惊天动地观后感
2015/06/10 职场文书
房贷工资证明范本
2015/06/12 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
java项目构建Gradle的使用教程
2022/03/24 Java/Android
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android