localstorage跨域（localstorage跨域&&跨浏览器）

：暂无数据 2026-03-29 07:20:01 ：0

本篇内容旨在成为您理解localstorage跨域的实用手册，其中localstorage跨域&&跨浏览器将是我们要重点打磨的章节。

本文目录

localstorage跨域&&跨浏览器
对于跨域请求token如何保存
什么是跨域、怎么解决跨域
html5 localstorage 支持跨域吗

localstorage跨域&&跨浏览器

localstorage无法跨域（同源策略的限制），无法跨浏览器；

localstorage可通过storage event数据变化**；

必须通过flash实现跨浏览器，因为不同的浏览器使用的flash都是同一个。因此，使用flash cookie就可以实现这样的功能；

postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。接受两个参数：

通过postMessage 向【其他域】发送跨域消息；
window.parent.postMessage()
iframe.contentWindow.postMessage()
**跨域消息 window.addEventListener(’message’, fn );

***隐藏网址***

对于跨域请求token保存步骤如下：
1、在后端服务器上设置好Token生成逻辑，例如使用JWT签发Token。
2、前端页面通过AJAX发送跨域请求，将用户名和密码等登录信息传递给后端。
3、后端验证用户信息，如果验证成功，则生成Token，并设置Token的有效期和相关的数据内容（如用户角色等）。
4、将生成的Token返回给前端，并在响应头中设置Access-Control-Expose-Headers头部，允许前端访问该头部信息。
5、前端收到响应后，将Token存储在客户端localstorage或者cookie中，方便后续跨域请求时附加Token。
6、后续跨域请求时，在AJAX请求头中附加Token信息，并在后端进行Token验证，只有验证通过才能获取相应资源或执行相应操作。

什么是跨域、怎么解决跨域

一个请求url的** 协议、端口、域名 **其中任意一个与当前页面url不相同就是跨域

***隐藏网址***

是因为浏览器的同源策略的限制，同源策略是一种安全策略，同源指的是域名，协议，端口相同，会阻止一个域的js脚本和另一个域的内容进行交互。防止在一个浏览器中的两个页面产生不安全、异常的行为。

当然如果不同源的话会产生一定的限制：

【1】无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB

【2】无法接触非同源网页的 DOM

【3】无法向非同源地址发送 AJAX 请求

document.createElement(‘script’) 生成一个 script 标签，然后插 body 里而已。

JSONP的实现原理就是创建一个script标签, 再把需要请求的api地址放到src里. 这个请求只能用GET方法, 不可能是POST（向服务端传送数据）。

一种非正式传输协议，它会允许用户传递一个callback参数给服务端，然后服务端返回数据的时候会将这个callback参数作为函数名来包裹住JSON数据，然后客户端就可以随意的定义自己的函数来处理返回的数据了。

一般是后端在处理请求数据的时候，添加允许跨域的请求头信息，服务端设置Access-Control-Allow-Origin就可以，如果需要携带cookie，前后端都需要设置

window对象有个name的属性，在一个window下，窗口载入的页面都是共享一个window.name。

在a.html中，怎么把b.html页面加载进来，获取b.html的数据。在a.html页面使用iframe，可以去获取b.html的数据，然后在a.html页面中取得iframe获取得数据。

***隐藏网址***

// 父窗口打开一个子窗口

***隐藏网址***

// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)

***隐藏网址***

调用message事件，**对方发送的消息

// ** message 消息

window.addEventListener(’message’, function (e) {

c***ole.log(e.source); // e.source 发送消息的窗口

c***ole.log(e.origin); // e.origin 消息发向的网址

c***ole.log(e.data); // e.data 发送的消息

},false);

server{

# **9099端口

listen 9099;

# 域名是localhost

server_name localhost;

***隐藏网址***

location ^~ /api {

***隐藏网址***

}

}

***隐藏网址***

***隐藏网址***

method: ’POST’,

headers: {

’Accept’: ’application/json’,

’Content-Type’: ’application/json’

},

body: JSON.stringify({

msg: ’helloIframePost’

})

})