localstorage实现两个页面通信，购物车原理。

如：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>

来源：https://www.cnblogs.com/7Ezreal/p/11984380.html

标签

localstorage

通信

购物车