博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5本地存储 localStorage
阅读量:5068 次
发布时间:2019-06-12

本文共 2893 字,大约阅读时间需要 9 分钟。

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、兼容性

localStorage兼容性说明

可以看到,除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兼容性的解决方案。

6、存储大小

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

7、应用场景

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

 

参考:

1>

2>

3> 

4> 

 

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

 

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

你可能感兴趣的文章
软件工程团队作业3
查看>>
python标准库——queue模块 的queue类(单向队列)
查看>>
display的值有哪些?
查看>>
转发——谷歌云官方:一小时掌握深度学习和 TensorFlow
查看>>
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题...
查看>>
shell的使用
查看>>
autolayout实现水平三等分
查看>>
paip.获取文件名从路径uapi java python php总结...
查看>>
Atitit 修改密码的功能流程设计 attilax总结
查看>>
解析DOM节点对象的属性
查看>>
安全模式 冷启动
查看>>
simulated annealing/爬山/Metropolis/优化算法
查看>>
基于Lucene3.5.0怎样从TokenStream获得Token
查看>>
一网打尽各类Java基本数据类型转换
查看>>
FlowLayout布局
查看>>
深入理解JVM读书笔记--字节码执行引擎
查看>>
vue-搜索功能-实时监听搜索框的输入,N毫秒请求一次数据
查看>>
批处理 windows 服务的安装与卸载
查看>>
React文档翻译 (快速入门)
查看>>
sql注入【手工及一些工具】
查看>>