HTML5的本地存储是大势所趋,如果仅存储在内存中,则是sessionStorage,他们的语法都是一样,仅仅是一个存储在本地文件系统中,另一个存储在内存中(随着浏览器的关闭而消失),其语句如下:

localStorage.setItem('a', 'xxxxxx');  // 设置
localStorage.getItem('a'); // 获取
localStorage.removeItem('a'); // 删除

下面说说有关localStorage和sessionStorage的特性。

1、存储格式

仅仅存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。

2、生命周期

在数据存储的时效性上,localStorage并不会像cookie那样可以设置数据存活的时限。也就是说,只要用户不主动删除,localStorage存储的数据将会永久存在。

3、存储位置

当然,对于localStorage数据的存储,是存在于本地的文件系统中的,例如,对于chrome来说,localStorage数据的存储位置是在:C:\Users\{userName}\AppData\Local\Google\Chrome\User Data\Default\Local Storage中。对于其他4大浏览器,大家可以自行查找进行查看。

4、数据共享

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage(页面属于相同域名和端口),但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是,页面及标签页仅指顶级窗口,如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。

5、兼容性

可以看到,除IE外的其他浏览器很早的版本都支持了,对于IE低版本系列的浏览器,我们需要一个兼容方案来处理。

微软在IE5.0以后,自定义了一种持久化用户数据的概念userData,这种存储方式只有IE浏览器自己支持。来看看其如何操作——

(function(win) {
// 对于IE,且不支持localStorage的浏览器
// 即针对IE6/7
if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
var localFileName = "_simulateLocalStorage",
expires = 365,
formField = null; // 设置有效期为365天
var expire = new Date();
expire.setDate(expires + expire.getDate()); formField = document.createElement("input");
formField.type = "hidden";
formField.addBehavior('#default#userData'); document.body.appendChild(formField); var storage = {
setItem : function(key, value) {
formField.load(localFileName);
formField.setAttribute(key, value);
formField.save(localFileName);
},
getItem : function(key) {
formField.load(localFileName);
return formField.getAttribute(key);
},
removeItem : function(key) {
formField.load(localFileName);
formField.removeAttribute(key);
formField.save(localFileName);
},
clear : function() {
formField.load(localFileName);
var d = new Date();
d.setDate(d.getDate() - 1);
formField.expires = d.toUTCString();
formField.save(localFileName);
}
}; win["localStorage"] = storage;
}
})(window);

这里仅仅是对IE兼容性的简单包装,下面的链接给出非常完善的针对localStorage兼容性的解决方案。

https://github.com/machao/localStorage

6、存储大小

对于HTML5的localStorage而言,其大小支持为5M(当然,各浏览器的大小差异还是有的)。对于IE的userData,用户数据的每个域最大为64KB。

7、应用场景

建议不要使用localStorage方式存储敏感信息,哪怕这些信息进行过加密。另外,对身份验证数据使用localStorage进行存储还不太成熟。我们知道,通常可以通过xss漏洞来获取到Cookie,然后用这个Cookie进行身份验证登录,但是浏览器可以通过HttpOnly来保护Cookie不被XSS攻击获取到。而localStorage存储没有对XSS攻击有任何防御机制,一旦出现XSS漏洞,那么存储在localStorage里的数据就极易被获取到。

参考:

1> 《Web前端黑客技术揭秘》

2> github-machao-localStorage

3> HTML5 LocalStorage 本地存储

4> localStorage、sessionStorage用法总结

转自 http://www.cnblogs.com/jinguangguo/p/4083919.html

HTML5本地存储 localStorage的更多相关文章

  1. HTML5 本地存储 localStorage、sessionStorage 的遍历、存储大小限制处理

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  2. HTML5本地存储localStorage与sessionStorage

    在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(applica ...

  3. HTML5 本地存储 LocalStorage

    说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个co ...

  4. HTML5本地存储localStorage与sessionStorage详解

    前言 在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(appl ...

  5. HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等

    HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localSt ...

  6. HTML5本地存储localStorage、sessionStorage及IE专属UserData

    By:王美建 from:http://www.cnblogs.com/wangmeijian/p/4518606.html 转载请保留署名和出处! 在客户端存储数据用的最普遍的方式非cookie莫属, ...

  7. HTML5本地存储 localStorage操作使用详解

    1.html5几种存储形式 本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQ ...

  8. HTML5本地存储 localStorage 和 sessionStorage 的基本用法及属性

    localStorage 和 sessionStorage 的用法都是本地的存储和获取 但他们又有所区别, 1, sessionStorage 是一个短暂的本地存数,它会随着浏览器的刷新和关闭而消失, ...

  9. HTML5本地存储Localstorage

    什么是localstorage 前几天在老项目中发现有对cookie的操作觉得很奇怪,咨询下来是要缓存一些信息,以避免在URL上面传递参数,但没有考虑过cookie会带来什么问题: ① cookie大 ...

随机推荐

  1. kali2 vmtools

    root@kali:~# cat /etc/apt/sources.list# Regular Repositoriesdeb http://http.kali.org/kali sana main ...

  2. 第一个自定义HTML网页

    前言 已经好几天没玩LOL了,实在手痒,下载了游戏,又卸载了,坦言:毛爷爷说的”好好天天向上“,真不容易.但还是回到学习个状态了,开始写,就“根本停不下来”,我也慢慢感受到代码的快乐了,并且想总结出一 ...

  3. Java 操作MySql数据库

    Java 项目开发中数据库操作是很重要的一个方面,对于初学者来说,MySql是比较容易熟悉的一种常见数据库,这篇文章记录了如何用Java来操作MySql数据库. 第一章 JDBC的概念 JDBC(Ja ...

  4. Bluebird-Core API (三)

    Promise.join Promise.join( Promise<any>|any values..., function handler ) – -> Promise For ...

  5. Oracle 表空间修改字段大小

    1.修改字段大小 当表中已经存在数据,就不能直接修改某字段大小,需要新建一个字段来过渡   ALTER TABLE TABLE RENAME COLUMN GRP TO FUND_GRP_1; ); ...

  6. 转】Linux下安装Tomcat服务器和部署Web应用

    原博文出自于: http://www.cnblogs.com/xdp-gacl/p/4097608.html 感谢! 一.上传Tomcat服务器

  7. Dagger学习笔记

    @Inject 提供依赖的构造函数,或者需要依赖的成员变量 @Module 提供依赖,实例化的地方( 使用module实例化,方便测试的时候替换成其他对象,而这也是和构造方法注入的区别,如果用构造方法 ...

  8. HDU1001

    求和 #include<stdio.h> int main() { long n; while(scanf("%ld",&n)!=EOF){ long i; ; ...

  9. 队列与DelphiXe新语法

    好久没写代码了,更久没上博客园的博客了,无聊写几行试一下新语法. 1 unit Main; interface uses Winapi.Windows, Winapi.Messages, System ...

  10. JDBC 常用驱动类及url格式

    1. oracle <dependency> <groupId>com.oracle</groupId> <artifactId>ojdbc6</ ...