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

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

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

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

阅读 2.1k
7 个回答

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

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

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

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

两个项目端口不一样,属于跨域了,所以本地存储不能共享;
想要让两个项目共享本地存储的信息,可以再起一个服务(如端口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");
    });
};

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题