HTML5
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、流程如图所示：
image2
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/
http://www.jianshu.com/p/e86d92aeae69
网友评论