前端本地部署多项目如何共享本地存储相关信息？

Question

公司有个老项目用的技术比较老，很难维护。我想登录后的某些新功能抽出去，重新搭建一套，但是要共享登录的后本地存储的相关信息，我该怎么做呢？

部署到线上倒是好解决，用同一个域名不同目录就可以实现。但是本地调试该如何操作做呢？

比如：老的环境用的是80端口，新的vue项目用的是8088端口。我怎么让两个项目共享本地存储的信息呢？

Answer 1

没有很好的办法，不过既然是开发阶段，写个脚本帮你复制粘贴吧。

收藏夹里可以直接放脚本，可以写好了放进去。

Answer 2

用cookie呀。把cookie存储到这两个项目的公共域名下就可以了。

比如老项目叫 www.abc.com，新项目叫 new.abc.com，那cookie 的 domain 就是 .abc.com

Answer 3

两个项目端口不一样，属于跨域了，所以本地存储不能共享；
想要让两个项目共享本地存储的信息，可以再起一个服务（如端口3030）做入口，然后根据情况转发到80端口或者8088端口，这样对浏览器来说新旧项目都在一个端口下，就不存在跨域问题了；
下面是之前我这边用的，用于解决老的ng项目和新的uni项目公用本地存储问题的代码，你可以参考下：

var http = require('http')
var httpProxy = require('http-proxy')
// let open = require("open");

var proxy = httpProxy.createProxyServer();

proxy.on('error', function (err, req, res) {
    res.end();
});

start(80, 8088)

function inUni(req) {
    if (req.url.startsWith('/unih5')) {
        return true;
    }    
    return false;
}

function start (ngPort, uniPort) {
    var proxy_server = http.createServer(function (req, res) {
        if (!req.url.includes('browser-sync')) {
            console.log(req.url, '-----------------', inUni(req))
            if (inUni(req)) {
                proxy.web(req, res, {
                    target: `http://localhost:${uniPort}`
                });
            } else {
                proxy.web(req, res, {
                    target: `http://localhost:${ngPort}`
                });
            }
        }
    });

    var port = 3030;
    var url = `http://localhost:${port}`;
    proxy_server.listen(port, function () {
        console.log('proxy server is running at: ', url);
        // open(url, "chrmoe");
    });
};

Answer 4

我觉得可以尝试微前端架构。以qiankun的例子，老项目作为主应用，新项目作为子应用。然后就可以共享本地存储了。

Answer 5

存到localStorage里面不就可以共享了吗？

Answer 6

参考这个：cross domain localstorage with javascript - StackOverflow

可以使用 postMessage 和 iframe 传递消息

Answer 7

采用cookies存储，利用顶级域名相同的特点，设置domain便可实现数据共享