HTML5 Web存储--localStorage/sessionStorage

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存在来发送数据，所以拿不到数据；也就是说必须得在父页面中包含子页面时这种方案才可行。

前端小白，以上是我的个人理解，如有错误，忘批评指正，谢谢大家

参考资料：

http://annn.me/cross-domain-local-storage/

http://www.jianshu.com/p/e86d92aeae69

http://blog.csdn.net/monkindey/article/details/23659387

http://www.haorooms.com/post/window_postMessage