js实现多页面数据同步

关注

原创最新推荐文章于 2026-04-02 02:29:08 发布 3.1k 阅读 AI 写同款· GEO 优化 ›

Vue3多页面应用中的Pinia状态共享：跨页面数据同步的实战解析本文深入解析了Vue3多页面应用中Pinia状态共享的实战方案，解决了跨页面数据同步的痛点。通过单例模式、本地持久化存储和BroadcastChannel API三种方案对比，结合电商购物车案例，详细展示了如何实现高效的状态管理，提升多页面应用的用户体验。阅读详情

父页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<input type="text" id="page">
<section>
    <div page="page1" url="page1.html">1</div>
    <div page="page2" url="page2.html">2</div>
</section>

</body>
<script>


    function openPage(url) {
        return open(url, "_blank")
    }

    let p = new Proxy({}, {
        set: function (target, key, value, receiver) {
            Reflect.set(target, key, value, receiver);
        }
    });
    p[Symbol("page0")] = window;

    document.querySelector("section").onclick = function (event) {
        let e = event || window.event;
        e.stopPropagation();
        e.preventDefault();
        let t = e.target;
        p[Symbol(t.getAttribute('page'))] = openPage(t.getAttribute('url'));
    }
    function syncPageValue(val){
        for(let key of Object.getOwnPropertySymbols(p)){
            p[key].document.querySelector("#page").value = val;
        }
    }
    page.oninput = function(e){
        syncPageValue(e.target.value)
    }
</script>

</html>

子页面1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="page">
</body>
<script>
    document.body.onload = function () {
        page.value = opener.page.value;

        page.oninput = function (e) {
            opener.syncPageValue(e.target.value);
        }

    }
</script>
</html>

子页面2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="page">
</body>
<script>
    document.body.onload = function () {
        page.value = opener.page.value;

        page.oninput = function (e) {
            opener.syncPageValue(e.target.value);
        }

    }
</script>
</html>

收录于