对于前端开发者来说,什么是最让我们头疼不已的事?那不用说自然是页面数据传递问题。解决了同域传输,那么还有跨域问题等着我们。总之,这一块的问题是我们最难解决的。但是随着H5的出现,它给我带来了更多的API,让我们去解决以前很难解决的问题。记得之前我们传递数据用的最多的是cookie、session和url带参数过去,但是现在H5给我们带来了web Storage和postMessage。当我们遇到问题不能头发胡子一把抓,应该是具体问题具体分析。而之前我遇到的问题多数是同域下进行数据传递,用的比较多的也是web Storage。下面我先简单的介绍下关于web Storage的用法和个人运用。
Web Storage
这个是H5中的一个对象,而这个对象中又有两个属性,localStorage和sessionStorage。sessionStorage顾名思义,其实也仅仅是局限于当前窗口的数据传递,如果窗口关闭了,那么所绑定的值也就没有了。所以,在实际的开发中我们很少会用到sessionStorage来传递数据。用的比较多的是localStorage。这个对象里面所包含的方法有如下几个:
.setItem(key,value);//绑定所需要传递的键值对
.getItem(key);//根据key来获取相应的value
.removeItem(key);//根据key删除相应的value
其实这三个方法是比较常用的方法。
虽然localStorage好用,但是它也存在着一些缺点:
1、localStorage由于浏览器安全问题无法实现跨域传递数据;它只能接受协议相同、端口相同和主机名相同的数据传递,而sessionStorage更为苛刻不仅要满足前面的条件,还必须是同窗口!
2、存在一定的安全性问题,所以建议各位在使用它时,不要用来存储一些敏感数据;
3、只兼容IE8以上的浏览器。
但是这些缺点完全不影响我们使用localStorage来进行开发。反而知道它的一些缺陷后,我们能够更合理的来使用它帮我们完成一些工作。
localStorage的生命周期
因为localStorage是本地存储,所以它的生命周期是在你setItem的时候就一直存在于我们的内存里。甚至创建好之后,你关闭电脑再打开。这个时候通过getItem也是能够获取到相应值的。所以它的生命周期是在不主动删除的时候,它会一直存在。而sessionStorage则是窗口关闭之后,保存的值就随着浏览器窗口的关闭而销毁了。
其实在同域下传值,localStorage是非常好用的。现在我们的项目里也用到了它,帮我解决了很多问题。但是后面我在做技术分享的时候被问到了几个比较让我尴尬的问题。localStorage能不能解决跨域问题?当时因为对这个API不是很熟悉,所以放黄枪了。回答的一些问题感觉也无法自圆其说。所以后面上网查了一些关于H5如何解决跨域传值的问题,也就是大家熟知的postMessage(),这个就在后面的笔记里做一些分享吧。上面的内容仅仅是本人学习了webStorage之后的一些心得,如果存在不足的地方,希望各位大神能够指点,谢谢!