HTML5提供了2种在客户端存储的方法:
1、localStorage --没有时间限制的数据存储
2、sessionStorage --针对一个session的数据存储,会话结束时会被清空
一、作用域
localStorage在相同的协议、主机名、端口下,就能读取/修改到同一份localStorage数据
sessionStorage在上述的条件下还要求在同一个窗口,也就是只要关闭了浏览器(包括关闭标签页),就会被清空
二、VS cookie:
1、存储数据更多 ( cookie只有4k,localStorage一般5M )
2、速度快,效率高
三、数据结构
采用标准键值对数据结构,键是唯一的,重复以同一个键来赋值的话,会覆盖上次的值。
四、localStorage方法
1、特性
(1)只支持string类型
(2)浏览器在隐私模式下不可读取
(3)localStorage不能被爬虫抓取到
2、3种写入方法
var storage=window.localStorage;
第一种://写入a字段 storage["a"]=1;
第二种://写入b字段 storage.b=1;
第三种://写入c字段 storage.setItem("c", 3);
3、删除
全部清除 window.localStorage.clear( )
对某个键值对的删除 window.localStorage.removeItem('a’)
4、特别注意这些操作都只能对同一个域下的数据进行操作
五、sessionStorage方法
1、VS localStorage
相同:各种语法特性都相同
不同:localStorage里存的数据没有过期的时间设置,而sessionStorage里存储的数据在页面会话结束时被清除
六、localStorage的跨域问题
这一点我想重点介绍一下,因为项目设计,所以研究里好几天,但是最后由于项目不适用没有使用,但是一些知识想整理出来
这里我们使用HTML5的postMessage并结合iframe进行跨域
我们模拟一个场景:将http://a.com/index.html页面中的用户信息带到http://b.com/index.html中去
1、流程如图所示:
1)、在a.com里插入一个iframe,并指向b.com
2)、a.com通过postMessage传递指定格式的消息给b.com
3)、b.com解析a.com传递过来的消息内容,调用localStorage API操作本地数据
4)、b.com使用localStorage中的数据
2、细小知识点
我使用的过程中遇到的一些小的知识点我也想和大家一起学习一下
获取iframe时,我们可以使用window.frames来获取全部iframe对象,相当于document.getElementsByTagName( "iframe" )
3、代码(此处只写js代码)
http://a.com/index.html
var domain = 'http://b.com/index.html'; //定义目标域名
var message = {userId:1,userName:"wendy"}; //你在这里也可以传递一些数据,obj等
//发送消息和目标URI
window.frames[0].contentWindow.postMessage(message,domain); //假设页面上只有一个iframe
http://b.com/index.html
//响应事件
window.addEventListener('message',function(event) {
if(event.origin !== 'http://a.com/index.html') return;
console.log('message received: ' + event.data,event);//这里的event.data就是刚刚传过来的用户信息
},false);
4、结果
结果我这样操作后,event.data里面拿不到任何有用信息,为什么呢?
因为我的需求是从http://a.com/index.html跳转到http://b.com/index.html,在打开http://b.com/index.html时a.com已经销毁,也就没有那样的iframe存在来发送数据,所以拿不到数据;也就是说只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数Document.domain设置为相同的值) 时,这两个脚本才能相互通信。
前端小白,以上是我的个人理解,如有错误,忘批评指正,谢谢大家
参考资料:
http://annn.me/cross-domain-local-storage/
//www.greatytc.com/p/e86d92aeae69