localstorage可以跨域吗，localstorage跨域&&跨浏览器
大家好！对于localstorage可以跨域吗你是否还存在疑惑呢？不用担心，今天本站就为大家提供关于localstorage可以跨域吗的详尽解读，同时，我们也会探讨涉及到localstorage跨域&&跨浏览器的相关问题。我们希望能通过这些信息，为大家解决实际问题。现在，让我们开始吧！
localstorage的跨域存储方案
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)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。接受两个参数：
具体示例：
以上示例中，很好的实现了localStorage的跨域存储功能。这样就算解决问题了吗？
我们还会遇到另一个棘手的问题。在safari浏览器下，这种方法就不可行了。由于safari浏览器的默认限制，父页面无法向iframe里的跨域页面传递信息。这时针对safari浏览器就得另辟蹊径了。本人在项目中用的方法是在safari浏览器下，用url传值的方法来实现跨域存储功能。用这种方法有一个问题必须要先考虑的，就是safari浏览器的url能够支持多长的字符呢？ url的长度极限是由两方面决定的，一个是浏览器本身的限制，另一个就是服务器的限制。有人在Apache 2.4服务器上设置了一个非常大的LimitRequestLine和 LimitRequestFieldSize，然后进行测试，结果表明safari浏览器可以支持超过64k个字符的长度。一般服务器默认支持2~3万个字符长度的url不成问题。所以只要需要传输的数据量不是非常大的话，可以直接通过url来进行传递，如此就能解决safari下的跨域存储问题。示例如下：
如此就可以比较好的解决localStorage的跨域存储问题了。
localstorage跨域&&跨浏览器
localstorage无法跨域（同源策略的限制），无法跨浏览器；
localstorage可通过storage event数据变化监听；
必须通过flash实现跨浏览器，因为不同的浏览器使用的flash都是同一个。因此，使用flash cookie就可以实现这样的功能；
postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。接受两个参数：
通过postMessage向【其他域】发送跨域消息；
window.parent.postMessage()
iframe.contentWindow.postMessage()
监听跨域消息 window.addEventListener('message', fn);
【test1域下】
【test2域下】
【test2域下】
cookie在多域名下的跨域解决办法
项目背景
用户登录成功后，服务端生成token，并保存在cookie里。http的cookie机制解决了http请求的无状态，短连接的特性，前端后续的请求都不需要传token或密码，就可以实现权限的认证。
但是方便的同时，跨域和同源的问题随之而来。
不是同源，cookie是不能读写的。（这里的同源是指相同的协议，主机，端口；只要其中任何一项不相等，就不是同源。）（三级域名abc.xx.com与二级域名 xx.com是同源吗？）
下面以几组图来表示：
1、前后端分离的正常访问模式
后端cors配置相应前端的域名，允许跨域访问。后端的域名是meng.abc.com,前端的域名是m.abc.com。因为是同源，cookie读写正常。
2、多个前端域名，访问同一个后端服务的情况
现在增加了两个前端域名，m.51.com, m.xx.com。如下图所示，即使配置跨域的域名，但是也解决不了cookie读写的同源问题！！
3、多个前端域名，分别访问多个后端服务的情况
因为同源的特性，需要针对每个前端域名，分别对应一个后端域名。如下图所示，解决cookie的同源正常读写问题。
备注：这里就不详细讲解跨域的解决方案。上述，只要是前后端分离，都需要配置跨域的cors的二级域名。
spring.domain=abc.com;51.com;xx.com
spring.corsOrigins=
后期可能优化的地方：把token存储在localstorage等地方，通过http header传递到服务器验证，不要使用http cookie机制，好处既能避开crsf跨站攻击，又能解决同源的跨域问题。
