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/7if ( typeof win.attachEvent != "undefined" && typeof win.localStorage == "undefined") {var localFileName = "_simulateLocalStorage", expires= 365,formField= null;//设置有效期为365天var expire = newDate();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);returnformField.getAttribute(key);},removeItem :function(key) {formField.load(localFileName);formField.removeAttribute(key);formField.save(localFileName);},clear :function() {formField.load(localFileName);var d = newDate();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

转载于:https://www.cnblogs.com/qiangspecial/p/4285072.html

HTML5本地存储 localStorage相关推荐

  1. HTML5 本地存储 localstorage 安全分析

    在HTML5本地存储出现以前,WEB数据存储的方法已经有很多,比如HTTP Cookie,IE userData,Flash Cookie,Google Gears.其实再说细点,浏览WEB的历史记录 ...

  2. HTML5本地存储localStorage,sessionStorage

    HTML5新特性,用于本地存储, localStorage:不删除会一直存在斯基 sessionStorage:浏览器关掉,就跪了 /*** H5:数据存储方式,可以携带用户信息id* * 注意:* ...

  3. HTML5本地存储localstorage

    localStorage的用途 localStorage基本上就是三个特点: 数据永久被保存在本地,即使浏览器被关闭,数据也不会消失 存储空间大,一般为5~10M 存储的内容不会和服务器发生任何交互( ...

  4. HTML5 本地存储和内容按需加载的思路和方法

    HTML5 本地存储和内容按需加载的思路和方法 作者:佚名 字体:[增加 减小] 来源:互联网 时间:04-07 16:05:09 我要评论 本文将着重介绍HTML5本地存储和内容按需加载的思路和方法 ...

  5. HTML5之本地存储localstorage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  6. Cocos本地存储LocalStorage

    HTML5 LocalStorage 本地存储 //存档var stopResumeMenu4 = cc.MenuItemFont.create("存档", this.onSave ...

  7. HTML5 本地存储

    HTML5 本地存储 1.sessionStorage 2.localStorage 3.Database Storage 4.globalStorage 5.兼容性 参考文献 本地持久化存储一直是本 ...

  8. HTML5本地存储之Web Storage篇

    2019独角兽企业重金招聘Python工程师标准>>> Web Storage是HTML5引入的一个非常重要的功能,在前端开发中经常用到,可以在客户端本地存储数据,类似HTML4的c ...

  9. HTML5本地存储不完全指南

    历史 在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择: HTTP cookie.HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服 ...

最新文章

  1. where oracle用法,Oracle查询语句 select * from where 用法
  2. Extjs4.0 开发笔记-desktop开始菜单动态生成方法
  3. 台积电对世界最大创新贡献是什么?总裁魏哲家这样说...
  4. swift. 扩展类添加属性_Swift快速为类扩展属性
  5. 山东济南站见面会完美收官
  6. 小学生作业打印推荐哪个软件?
  7. HDU 1069 DP
  8. nest定义路由和路由失效的问题
  9. 怎么把pdf转换成excel转换器免费版
  10. MarkDown学习随笔
  11. HDU 4544 湫湫系列故事——消灭兔子 (贪心+优先队列)
  12. 互联网新机遇: 移动社交电商将成为下一个风口?
  13. 三万块钱6天的区块链培训,我学会了搭建区块链系统框架?
  14. FPGA中亚稳态、异步信号处理、建立和保持时间违例及题目合集
  15. 年入800万!韩国第一虚拟网红的崛起
  16. dsm是基于linux什么版本,DSM 文件扩展名: 它是什么以及如何打开它?
  17. 如果编程语言是一门武功绝学!那你学什么,才会成为天下第一?
  18. 奥的斯服务器显示chc,奥的斯服务器中文说明.docx
  19. matlab lpc求共振峰频率,在Python中使用LPC估计共振峰
  20. html微信支付功能代码,微信小程序 支付功能(前端)的实现

热门文章

  1. 星空下的痕迹 Jenkins学习(四)----------windows下Publish over FTP插件应用
  2. sqlite数据类型、关键词及创建、修改、删除数据表
  3. 在线rss阅读聚合器lilina-0.7安装笔记
  4. 记一次简单的sql优化
  5. 阿里云ECS上LVM磁盘配置
  6. 主成分分析PCA(principal component analysis)原理
  7. 【302天】跃迁之路——程序员高效学习方法论探索系列(实验阶段60-2017.12.04)...
  8. Appcan开发笔记:导出Excel文件
  9. Google https服务被屏蔽
  10. Ubuntu 软件包管理详解