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

  1. localStorage.setItem('a', 'xxxxxx'); // 设置
  2. localStorage.getItem('a'); // 获取
  3. 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浏览器自己支持。来看看其如何操作——

  1. (function(win) {
  2. // 对于IE,且不支持localStorage的浏览器
  3. // 即针对IE6/7
  4. if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {
  5. var localFileName = "_simulateLocalStorage",
  6. expires = 365,
  7. formField = null;
  8.  
  9. // 设置有效期为365天
  10. var expire = new Date();
  11. expire.setDate(expires + expire.getDate());
  12.  
  13. formField = document.createElement("input");
  14. formField.type = "hidden";
  15. formField.addBehavior('#default#userData');
  16.  
  17. document.body.appendChild(formField);
  18.  
  19. var storage = {
  20. setItem : function(key, value) {
  21. formField.load(localFileName);
  22. formField.setAttribute(key, value);
  23. formField.save(localFileName);
  24. },
  25. getItem : function(key) {
  26. formField.load(localFileName);
  27. return formField.getAttribute(key);
  28. },
  29. removeItem : function(key) {
  30. formField.load(localFileName);
  31. formField.removeAttribute(key);
  32. formField.save(localFileName);
  33. },
  34. clear : function() {
  35. formField.load(localFileName);
  36. var d = new Date();
  37. d.setDate(d.getDate() - 1);
  38. formField.expires = d.toUTCString();
  39. formField.save(localFileName);
  40. }
  41. };
  42.  
  43. win["localStorage"] = storage;
  44. }
  45. })(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用法总结

说说localStorage的更多相关文章

  1. HTML5 localStorage本地存储

    介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2 ...

  2. 似懂非懂的localStorage和sessionStorage

    一.区别 相信很多人都见过这两个关于HTML5的新名词!HTML5种的web storage包含两种存储方式:localStorage和sessionStorage,这两种方式存储的数据不会自动发给服 ...

  3. 将css和js缓存到localStorage缓存,提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

  4. cookies,sessionStorage和localStorage的区别---web前端sessionStorage和localStorage区别

    sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁.因此sessionStorage不是一种持久化的本地 ...

  5. sessionStorage 和 localStorage 、cookie

    sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...

  6. 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考

    首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...

  7. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  8. HTML5本地存储Localstorage

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

  9. HTMl5的存储方式sessionStorage和localStorage详解

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  10. localStorage使用总结

    一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...

随机推荐

  1. DLUTOJ #1394 Magic Questions

    传送门 Time Limit: 3 Sec  Memory Limit: 128 MB Description Alice likes playing games. So she will take ...

  2. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  3. ASP.NET MVC4中调用WEB API的四个方法

    http://tech.it168.com/a2012/0606/1357/000001357231_all.shtml [IT168技术]当今的软件开发中,设计软件的服务并将其通过网络对外发布,让各 ...

  4. easyui datagrid 通过复选框删除新追加的数据问题

    之前写好的功能在保存好数据后再通过复选框删除是没有问题的,可现在想多追加几行,然后选择删除新追加的某几行或一行,通过$('#dg').datagrid('getChecked')方法返回选中行,然而返 ...

  5. 去除DedeCms 5.7后台版权广告链接的方法

    织梦DedeCms 5.7后台有很多的织梦官方的广告链接,下面我们来将这些广告去掉吧. 一.去处后台登陆页login.php广告链. 1.找到登录界面模板文件/dede/templets/login. ...

  6. python numpy 教程

    http://blog.chinaunix.net/uid-21633169-id-4408596.html

  7. Starting zabbix_agentd: No such file or directory

    问题描述 [root@localhost admin]# service zabbix_agentd restart Shutting down zabbix_agentd: [FAILED] Sta ...

  8. php-5.3 zend opcache 的设置

    故障现象,修改了代码上传到生产服务器之后,需要等待60秒才生效. 细查了一下,是opcache引起的,默认是60秒.于是我给关了,之前是ea加速,现在新版本的php好像用这个opcache了:; 2s ...

  9. windows下安装redis以及简单的事例

    1.安装服务端下载地址:http://code.google.com/p/servicestack/wiki/RedisWindowsDownload我下载了一个 redis-2.0.0服务器包,解压 ...

  10. C#集合实现接口一览表