主要介绍了详解vuex结合localstorage动态监听storage的变化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文实例讲述了JS localStorage存储对象，sessionStorage存储数组对象操作。分享给大家供大家参考，具体如下： 一、前言 最近在用angular做商城购物车的功能模块，因为angular的watch监听，数据只要发生变化就能很方便的自动渲染页面。但随即出现的问题是，之前用户操作的样式都会被重置掉。 例如我勾选了几个商品准备结算，又修改了商品数量，这时候发起了请求，页面数据被渲染，打钩的商品全被恢复未选中。 想着将所有选中商品的独有Id存入数组，利用localStorage存

需求：不同组件间共用同一数据，当一个组件将数据发生变化时，其他组件也可以响应该变化。 分析：vue无法监听localstorage的变化。localstorage主要用于不同页面间传值，vue适合组件间传值。对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据（vuex在页面刷新的时候存储的值会丢失，localstorage存储在本地浏览器中），可以采用vuex+localstorage的方式。 关于vuex和storage的区别 1.最重要的区别：vuex存储在内存，locals

如果要实现2个同源tab页之间的数据交互，可以选择使用localStorage，因为它的存储遵循同源策略。通过约定localStorage某一个itemName，基于该key值的内容进行通信。 H5提供了storage事件，通过window对象监听storage事件，会监听到localStorage的变化（包括item的增加、删除、修改），从而完成不同tab页之间的数据交互。 示例： A页面 window.addEventListener(storage, function(ev){ i