HTML5本地存储localStorage、sessionStorage及IE专属UserData
By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处!
在客户端存储数据用的最普遍的方式非cookie莫属,随着HTML5的普及,新的本地存储方式localStorage和sessionStorage将在标准浏览器上大展身手。localStorage和sessionStorage是HTML5的新特性之一,说是新特性,其实微软公司早在IE8上就已经支持localStorage和sessionStorage这两个api了,只不过在IE8、9下测试这两个api时,务必在服务器环境下测试,在本地环境会报错。
一、localStorage是什么?
localStorage用于持久化的本地存储,除非手动删除数据,否则数据永不过期。
二、相比于cookie,localStorage有什么优点?
如下表,罗列出了cookie和localStorage的特性
特性 | localStorage | cookie |
容量大小 | 5M | 4k左右 |
兼容性 | IE8及以上浏览器 | 基本上所有浏览器都兼容 |
过期时间 | 永不过期 | 可自定义 |
是否随HTTP发送到服务端 | 否 | 是(占用带宽) |
作用域 | 子域名之间相互独立 | 可通过.setDomain设置主域名共享 |
localStorage的优点很明显,容量大、不会占用带宽,除此之外,localStorage提供了丰富的方法去设置、读取、移除数据。
localStorage.setItem(key,value) // 设置键值对
localStorage.getItem(key) // 通过键值读取对应的值
localStorage.removeItem(key) // 通过键值移除对应的值
localStorage.clear() // 初始化localStorage,清除所有键值对
localStorage.key(index) // 通过下标index来获取指定索引的key名
sessionStorage跟localStorage长的差不多,那他们之间有什么差别呢?唯一的差别就在于它们保存数据的持久性上面,localStorage保存的数据永不过期,sessionStorage保存的数据在浏览器窗口关闭之后就消失了,不关闭浏览器窗口只刷新页面的话,sessionStorage保存的数据是依然存在的。它们拥有相同的属性和方法。
虽然sessionStorage和localStorage这么好用,但是IE6、IE7上面不支持,我们可以通过IE专属的UserData来弥补这个缺陷,UserData是早期IE浏览器用来本地存储数据用的,UserData的数据是以文件的形式保存在磁盘上,UserData需要依附于一个HTML标签来设置、读取、移除数据,并不是所有HTML标签都可以,支持的HTML标签有:
A, ABBR, ACRONYM, ADDRESS, AREA, B, BIG, BLOCKQUOTE, BUTTON, CAPTION, CENTER, CITE, CODE, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FONT, FORM, hn, HR, I, IMG, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, KBD, LABEL, LI, LISTING, MAP, MARQUEE, MENU, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, SUB, SUP, TABLE, TEXTAREA, TT, U, UL, VAR, XMP。
UserData对数据的大小同样有一定的限制(从MSDN文档翻译过来的,英文水平好的建议看英文文档):
站点类型 | 单个文件大小限制(KB) | 单个域名的数据大小限制(KB) |
本地机 | 128 | 1024 |
局域网 | 512 | 10240 |
受信任的站点 | 128 | 1024 |
互联网 | 128 | 1024 |
受限站点 | 64 | 640 |
从表格上面可以看出,要兼容各种情况的话,建议单个UserData文件大小不超过64KB。
利用UserData来存储数据比localStorage麻烦一些,但还是很简单,过程分为以下几步:
1、创建HTML标签
2、给HTML标签添加样式behavior:url(‘#default#userData’)或者js给HTML对象设置.addBehavior ("#default#userData")
3 、设置数据过期时间
4、载入UserData
5、存入数据/读取数据/删除数据
6、保存数据到存储区
看代码更容易理解(特别注意:以下代码请在body标签内部调用,在head标签内的script里调用提示没有权限,原因未知):
<script type="text/javascript">
var UserData = {
userData: null,
name: document.location.hostname, init: function() {
if (!this.userData) {
try {
this.userData = document.createElement("INPUT");
this.userData.type = "hidden";
this.userData.style.display = "none";
this.userData.addBehavior("#default#userData");
document.body.appendChild(this.userData);
var expires = new Date();
expires.setDate(expires.getDate() + 365);
this.userData.expires = expires.toUTCString();
} catch (e) {
return false;
}
}
return true;
}, setItem: function(key, value) { if (this.init()) {
this.userData.load(this.name);
this.userData.setAttribute(key, value);
this.userData.save(this.name);
}
}, getItem: function(key) {
if (this.init()) {
this.userData.load(this.name);
return this.userData.getAttribute(key)
}
}, remove: function(key) {
if (this.init()) {
this.userData.load(this.name);
this.userData.removeAttribute(key);
this.userData.save(this.name);
} }
};
</script>
总结:在IE6、IE7市场份额逐渐下降的情况下,localStorage和sessionStorage将会应用的越来越广泛,cookie除了在某些必要的情况下,完全可以用localStorage替代,当然,不建议在localStorage里面保存敏感数据,因为localStorage可以随时读取修改或删除。
参考文档:http://www.css88.com/archives/3717
By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处!
HTML5本地存储localStorage、sessionStorage及IE专属UserData的更多相关文章
- 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题
移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5本地存储localStorage与sessionStorage
在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...
- HTML5本地存储localStorage与sessionStorage详解
前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...
- HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...
- HTML5 本地存储 LocalStorage
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...
- HTML5本地存储应用sessionStorage和localStorage
在html5之前,浏览器要实现数据的存储,一般都是用cookie,但是cookie有域名和大小限定. html5流行之后,可以通过localStorage和sessionStorage实现浏览器端的数 ...
- HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性
localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...
随机推荐
- mysql的引擎选择
MyISAM 和InnoDB 讲解 InnoDB和MyISAM是许多人在使用MySQL时最常用的两个表类型,这两个表类型各有优劣,视具体应用而定.基本的差别为:MyISAM类型不支持事务处理等高级处理 ...
- UML类图学习笔记
http://note.youdao.com/noteshare?id=d5af220db7081dda73511fcb7b4da390
- SQL Server 排名函数( ROW_NUMBER、RANK、DENSE_RANK、NTILE )
排名函数是Sql Server2005新增的功能,下面简单介绍一下他们各自的用法和区别.我们新建一张Order表并添加一些初始数据方便我们查看效果. CREATE TABLE [dbo].[Order ...
- HTML培训课程-------Day02(表格和框架)
表格 在网页中表格是一种经常使用到得设计结构,就像表格的内容中可以包含任何的数据,如文字.图像.表单.超链接.表格等等,所有在HTML中可以使用的数据,都可以被设置在表格中,所以有关表格设置的标记与属 ...
- Dom选择器--内容文本操作
一.文本内容操作 内容: <body> <div id="i1"> 学习是我快乐? <a>晚饭吃什么</a> </div> ...
- vue实例的方法
1.mount挂载 vm.$mount('#app') 2.销毁 vm.$destroy() 3.刷新实例 vm.$forceUpdate() 4.更新后的操作 vm.$nextTick(functi ...
- bzoj千题计划207:bzoj1879: [Sdoi2009]Bill的挑战
http://www.lydsy.com/JudgeOnline/problem.php?id=1879 f[i][j] 表示匹配了i个字符,匹配字符串的状态为j的方案数 枚举下一个字符是什么 计算加 ...
- 流媒体技术学习笔记之(十)HLS协议直播延时优化(35s到10S)
1.首先要了解HLS延时的机制,也就是为什么会延时,延时主要发生在什么地方. HTTP Live Streaming 并不是一个真正实时的流媒体系统,这是因为对应于媒体分段的大小和持续时间有一定潜在的 ...
- livereload使用方法
搞这个自动刷新的插件搞了好几个小时了还没搞明白,快被气死了,想改用browser-sync结果npm又一直转啊转一直卡死. 刚才终于神奇地搞定了,结果发现还是我自己智商太低...大概的经过是这样的.. ...
- html5 canvas 对角线渐变
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...