localstorage跨域问题

最新推荐文章于 2025-09-17 11:07:13 发布

原创最新推荐文章于 2025-09-17 11:07:13 发布 · 9.8k 阅读

8 ·

CC 4.0 BY-SA版权

本文介绍了一种利用localStorage和postMessage解决泛域名下跨域问题的方法。通过在不同子域名间使用iframe通信，实现了用户登录信息的安全传递。

localstorage在泛域名下也存在跨域问题，要想解决这个问题可以通过postmessage。以登录为例，登录后获取的用户信息通过localstorage存储在A.xx.com下，若B.xx.com下的页面需要获取用户信息可以做如下操作：

A.xx.com 存储用户信息到localstorage

<!doctype html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin:0px;
}
</style>
</head>
<body style="height:100%;">
<script type="text/javascript">
window.onload=function(){
var user = JSON.stringify({
"uid":window.localStorage.getItem("uid"),
"nickname":window.localStorage.getItem("nickname"),
"avatar":window.localStorage.getItem("avatar"),
"token":window.localStorage.getItem("usertoken")
});
window.parent.postMessage(user,'*');
}

</script>
</body>

</html>

B.xx.com 向A.xx.com发起消息获取用户信息

<!DOCTYPE html>
<html>
<head>
<title>Post Message</title>
</head>
<body>
<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
<div id="color">Frame Color</div>
</div>
<div>
<iframe id="child" src="http://A.xx.com"></iframe>//通过iframe发起消息
</div>

<script type="text/javascript">
window.onload=function(){
window.frames[0].postMessage('getuser','http://A.xx.com');
}

window.addEventListener('message',function(e){
var user= JSON.parse(e.data);