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 相关文章推荐
利用javascript中的call实现继承
Jan 22 Javascript
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
Jun 16 Javascript
Jquery解析Json格式数据过程代码
Oct 17 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
May 14 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
jQuery Validate让普通按钮触发表单验证的方法
Dec 15 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
vue项目中使用eslint+prettier规范与检查代码的方法
Jan 16 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 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数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php中chdir()函数用法实例
2014/11/13 PHP
再谈PHP中单双引号的区别详解
2016/06/12 PHP
js创建数据共享接口——简化框架之间相互传值
2011/10/23 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
jquery 插件实现瀑布流图片展示实例
2015/04/03 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
js文字横向滚动特效
2015/11/11 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
vue iview组件表格 render函数的使用方法详解
2018/03/15 Javascript
vue如何进行动画的封装
2018/09/26 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
JavaScript定时器使用方法详解
2020/03/26 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
2020/08/10 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
python 回调函数和回调方法的实现分析
2016/03/23 Python
Python 实现数据库更新脚本的生成方法
2017/07/09 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
HTML5 script元素async、defer异步加载使用介绍
2013/08/23 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
关于青春的演讲稿三分钟
2014/08/22 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android