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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
Mar 15 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
window.open打开页面居中显示的示例代码
Dec 27 Javascript
javascript替换已有元素replaceChild()使用介绍
Apr 03 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
Jul 19 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
详解JavaScript 高阶函数
Sep 14 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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获取某个目录大小的代码
2008/09/10 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
PHP判断一个gif图片是否为动态图片的方法
2014/11/19 PHP
php源码分析之DZX1.5加密解密函数authcode用法
2015/06/17 PHP
微信支付开发交易通知实例
2016/07/12 PHP
JS创建优美的页面滑动块效果 - Glider.js
2007/09/27 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
判断及设置浏览器全屏模式
2014/04/20 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
微信小程序实现的一键连接wifi功能示例
2019/04/24 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
Node.js系列之连接DB的方法(3)
2019/08/30 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
Python实现删除当前目录下除当前脚本以外的文件和文件夹实例
2015/07/27 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
python读取csv文件并把文件放入一个list中的实例讲解
2018/04/27 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
Python异常的检测和处理方法
2018/10/26 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
详解如何使用rem或viewport进行移动端适配
2020/08/14 HTML / CSS
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
值传递还是引用传递
2015/02/08 面试题
学校师德师风整改方案
2014/10/28 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
25张裸眼3D图片,带你重温童年的记忆,感受3D的魅力
2022/02/06 杂记
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python