localstorage的跨域存储方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了localstorage的跨域存储方案相关的知识,希望对你有一定的参考价值。

参考技术A html5标准中一个亮点就是提供了浏览器本地存储的功能。方式有两种:localStorage和 sessionStorage。 相对于cookie,他们具有存储空间大的特点,一般可以存储5M左右,而cookie一般只有4k。

localStorage和 sessionStorage的主要区别是:localStorage的生命周期是永久的,意思就是如果不主动清除,存储的数据将一直被保存。而sessionStorage顾名思义是针对一个session的数据存储,生命周期为当前窗口,一旦窗口关闭,那么存储的数据将被清空。

当然作为孪生兄弟,两者也有很多相同点。比如存取数据的方法就是一样的。

另外,不同浏览器无法共享localStorage和sessionStorage中的信息。同一浏览器的相同域名和端口的不同页面间可以共享相同的 localStorage,但是不同页面间无法共享sessionStorage的信息。这里需要注意的是,页面仅指顶级窗口,如果一个页面包含多个iframe且他们属于同源页面,那么他们之间是可以共享sessionStorage的。在实际开发过程中,遇到的最多的问题就是localStorage的同源策略问题。为了了解这个问题,我们先得清楚什么是同源策略。同源策略( same-origin policy )是浏览器执行的一种安全措施,目的是为了保证用户信息的安全,防止恶意的网站窃取数据。浏览器的同源策略具体如下:

只要不同源就不能共享localStorage的数据。但是在实际开发中又时常会遇到这样的需求,那我们该如何解决呢?

目前广泛采用的是postMessage和iframe相结合的方法。postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信,可以实现跨文本档、多窗口、跨域消息传递。接受两个参数:

具体示例:
http://www.test.com/index_a.html

http://www.test2.com/getmessage.html

http://www.test2.com/index_b.html

以上示例中,很好的实现了localStorage的跨域存储功能。这样就算解决问题了吗?

我们还会遇到另一个棘手的问题。在safari浏览器下,这种方法就不可行了。由于safari浏览器的默认限制,父页面无法向iframe里的跨域页面传递信息。这时针对safari浏览器就得另辟蹊径了。本人在项目中用的方法是在safari浏览器下,用url传值的方法来实现跨域存储功能。用这种方法有一个问题必须要先考虑的,就是safari浏览器的url能够支持多长的字符呢? url的长度极限是由两方面决定的,一个是浏览器本身的限制,另一个就是服务器的限制。有人在Apache 2.4服务器上设置了一个非常大的LimitRequestLine 和 LimitRequestFieldSize,然后进行测试,结果表明safari浏览器可以支持超过64k个字符的长度。一般服务器默认支持2~3万个字符长度的url不成问题。所以只要需要传输的数据量不是非常大的话,可以直接通过url来进行传递,如此就能解决safari下的跨域存储问题。示例如下:

http://www.test.com/index_a.html

http://www.test2.com/index_b.html

如此就可以比较好的解决localStorage的跨域存储问题了。

以上是关于localstorage的跨域存储方案的主要内容,如果未能解决你的问题,请参考以下文章

解决项目中的跨域操作问题

几种常见的跨域原理的实现

#yyds干货盘点#跨域问题之Spring的跨域的方案

iOS wkwebview怎么写localStorage

前端的跨域访问解决方案!

前端常见的跨域解决方案