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

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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 13,976评论 6 13
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,036评论 25 709
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 10,999评论 0 106
  • 值类型(基本数据类型) 值类型是存储在栈(stack)中的简单数据,也就是说,它们的值直接存储在变量访问的位置。 ...
    嗨黄先生阅读 1,522评论 0 0
  • 还没有追上她的时候,记得有次请她吃饭,她吃得特别香。我问她:“你可以做我女朋友吗?”她嘴里叼着鸡翅说不行……然后又...
    Mr_金浩阅读 3,971评论 2 5

友情链接更多精彩内容