localStorage不同域名

Question

后端接口重定向到页面，然后进行登录请求，拿到token，放到localStorage里面，然后再重定向到前端首页。前后端是两个域名，localStorage存不进去首页。怎么整，有哪些方案？

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题分析：

1. 两个域名的localStorage不互通，需要找到其他的存储方案。
2. 需要在登录页面请求后端接口获取token并将其存储下来，然后再重定向到前端首页，需要将已存储的token传递到首页。 解决方案：
3. 使用cookie进行存储。由于cookie存储在客户端，可以跨域读取。可以在登录页面请求后端接口获取token后将其存储在cookie中。然后在重定向到前端首页时，可以通过document.cookie读取cookie值，并将其传递给首页。

// 存储cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// 读取cookie
function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
// 存储token
setCookie("token", "xxxxx", 1);
// 读取token
var token = getCookie("token");

1. 在跨域的情况下，可以使用postMessage进行通信。可以在登录页面请求后端接口获取token后，将其存储在localStorage中，然后使用postMessage将数据传递给前端首页。前端首页通过监听message事件，获取传递过来的数据。

// 登录页面存储token
localStorage.setItem("token", "xxxxx");
// 前端首页接收token
window.addEventListener("message", function (event) {
    if (event.origin === "http://www.login.com") { // 判断消息来源是否为登录页面的域名
        var token = event.data;
        localStorage.setItem("token", token);
    }
});
// 登录页面发送消息
var token = localStorage.getItem("token");
var targetOrigin = "http://www.homepage.com"; // 前端首页的域名
parent.postMessage(token, targetOrigin);

1. 在跨域的情况下，可以通过url传递数据。可以在登录页面请求后端接口获取token后，将其放到url参数中，然后在重定向到前端首页时，将token作为url参数传递给前端首页。前端首页通过解析url参数，获取token值。

// 存储token到url参数
var url = "http://www.homepage.com?token=xxxxx";
window.location.href = url;
// 获取url参数中的token值
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return decodeURIComponent(r[2]);
    }
    return null;
}
var token = getQueryString("token");