localStorage的使用细节

Posted 2020-07-18

　　对于前端开发者来说，什么是最让我们头疼不已的事？那不用说自然是页面数据传递问题。解决了同域传输，那么还有跨域问题等着我们。总之，这一块的问题是我们最难解决的。但是随着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之后的一些心得，如果存在不足的地方，希望各位大神能够指点，谢谢！