js本地存储localStorage的跨页面通信

最新推荐文章于 2025-01-15 16:00:37 发布

原创最新推荐文章于 2025-01-15 16:00:37 发布 · 2.1k 阅读

4 ·

CC 4.0 BY-SA版权

本文介绍如何使用localStorage实现跨页面通信，通过两个HTML页面演示数据存储和读取过程。当一个页面上的输入值发生变化并存储到localStorage后，另一个页面能够监听到这一变化并更新显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

localStorage的跨页面通信运用，以购物车为例
说到这里，就不得不说一下onstorage事件了，当存储空间中数据发生变化的时候触发该事件，以下例子中有实际运用。
需要有两个HTML文件，第一个文件用来存数据，第二个文件用来取数据，具体代码如下：
物品界面.html

<script>
    document.addEventListener('DOMContentLoaded',function(){
        var oN = document.getElementById('num');
        /*当input的数据改变的时候*/
        oN.onchange = function(){
            /*存一个key为num的数据*/
            localStorage.num = this.value;
        };
    },false);
</script>
<body>
物品：<input type="number" name="num" id="num" min="0" max="10" step="2" value="0">
</body>

结算界面.html

<script>
    document.addEventListener('DOMContentLoaded',function(){
        var oP = document.getElementById('price');
        /*当存储空间中数据发生变化的时候*/
        window.onstorage = function(ev){
            /*获取正在变化的数据*/
            var n = localStorage[ev.key]*20;
            oP.innerHTML = n;
        };
    },false);
</script>
<body>
物品总价：<strong id="price">0</strong>
</body>