Question

我正在使用store.js（一个JS库）来管理本地存储。

我想做什么

在client中将localStorage的值保存在浏览器的一个标签中，然后当值更改时，我想听取更改后的值。

问题

以下代码在浏览器的同一选项卡中工作，但是当我检查另一个选项卡时，没有触发更改事件。

＆＃13;

store.set('client', {
  'name': Math.random()
});

$('#mybtn1').click(function() {
  store.set('client', {
    'name': Math.random()
  });
});


store.observe('client', function(val, oldVal) {
  console.log('changed');
  console.log(store.get('client'));
});

＆＃13;

<script src="https://raw.githubusercontent.com/marcuswestin/store.js/master/dist/store.everything.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="mybtn1" type="button">click</button>

＆＃13;

帮助

你能指导我出错吗？我也愿意使用Jquery来监听这些变化。

Answer 1

我遇到了与store.js类似的问题，所以我最终使用纯localStorage和事件监听器方法来实现这个问题。

这是工作的JSFiddle：Detect localStorage change on another browser tab

说明：

这使用了Web Storage API。

您可以使用

调用创建新的localStorage键值对

localStorage.setItem("current_tenant", "Tenant1");

现在，无论何时更改此存储，都会触发StorageEvent。此事件仅发送到其他窗口。

只要对Storage对象进行了更改，就会触发StorageEvent（请注意，对于sessionStorage更改，不会触发此事件）。这不适用于进行更改的同一页面 - 它实际上是域中其他页面使用存储同步任何更改的方式。其他域上的页面无法访问相同的存储对象。资料来源：MDN Web Docs

然后，您可以在此存储上添加事件侦听器，并使用事件属性oldValue和newValue检测更改例如，

将您的示例转换为JSFiddle，这是结合storeJS和StorageEvent

的解决方案

收听/观察 - 使用store.js更改LocalStorage

1 个答案: