localstorage实现两个页面通信，前端js京东淘宝购物车原理。

.伊泽瑞尔

已于 2023-10-31 15:42:26 修改

阅读量487

点赞数

分类专栏：前端文章标签：前端 javascript 开发语言

于 2019-12-13 21:41:07 首次发布

本文链接：https://blog.csdn.net/qq_35517283/article/details/103533782

版权

前端专栏收录该内容

42 篇文章 0 订阅

订阅专栏

如：A，B页面，A为商品页，B为购物车页，两个页面同时打开,在A页面点击商品添加至购物车，切换到B页面购物车怎么显示该商品信息

利用localStroage，A页面将数据存入localStroage，B页面读取localStorage中的数据
关键点: B页面如何知道A页面什么时候存数据到localStorage
localStorage中有个‘storage’事件
window.addEventListener(‘storage’, callback)，A页面存数据，B页面监听事

A页面
<button id="add">添加一件商品到购物车</button>
  <button id="del">删除一件商品从购物车</button>
<script type="text/javascript">
    window.onload = function () {
      document.getElementById('add').onclick = function () {
        count(true)
      }

      document.getElementById('del').onclick = function () {
        count(false)
      }

      function count(flag) {
        let count = localStorage.getItem('count')?JSON.parse(localStorage.getItem('count')).count:0;
        if(flag){
          count += 1;
        }else {
          if(!count) return;
          count -= 1;
        }
        let countObj = {
          count
        }
        localStorage.setItem('count', JSON.stringify(countObj))
      }
    }

B页面
<div class="cart">
  购物车产品数量:
  <span class="count">0</span>
</div>
<script type="text/javascript">
      document.querySelector('.count').textContent = localStorage.getItem('count')?JSON.parse(localStorage.getItem('count')).count:0;
      window.addEventListener('storage', function (event) {
        console.log(JSON.parse(event.newValue).count);
        document.querySelector('.count').textContent = JSON.parse(event.newValue).count
      })
</script>