Polymer - JavaScript - 数据绑定：实时更新？

Question

我有两个页面：my-view1 和 my-view2。 在 my-view1 上，我有两个按钮可以在 LocalStorage 中添加和删除数据。 在 my-view2 上，我有两个简单的 div 读取（显示）总值和过去 6 个月的总值。

但是，在第二个页面上，如果页面没有刷新，值不会更新。我希望 my-view2 中的值在每次加载页面时自动更新（查看，即使缓存）。

这是一个带有 my-view2 的 plnkr，因此您可以理解我正在尝试做的事情。

https://plnkr.co/edit/ul4T2mduxjElCN4rUUKd?p=info

我该怎么做？

Answer 1

你可以在更新localStorage时监听storage事件来触发和更新my-view2中的一些prop：

<my-view-2 id="myView2"></my-view-2>
<script>
  window.onstorage = function(e) {
    if (e.key !== 'someKeyYouWant') return;
    document.getElementById('myView2').set('someProp', {
      oldValue: e.oldValue,
      newValue: e.newValue
    });
  };
</script>

编辑（working plunk）：由于here 描述的行为，存储事件不会在发起更改的窗口上触发，因此您必须触发自己的存储事件，请考虑以下方法：

saveToLs(e) {
  e.preventDefault();
  const newName = this.get('dogName');
  const ls = window.localStorage;
  const synthEvent = new StorageEvent('storage');
  const eventConfig = [
    'storage', 
    true, 
    true, 
    'myDog', 
    ls.getItem('myDog'), 
    newName
  ];

  synthEvent.initStorageEvent(...eventConfig);

  setTimeout((() => { // ensure async queue
    ls.setItem('myDog', newName);
    this.dispatchEvent(synthEvent);
  }).bind(this), 0);
}

...在聆听方面：

handleStorageUpdate(e) {
  if (e.key !== 'myDog' || e.newValue === this.get('dogName')) return; 
  this.set('dogName', e.newValue);
}

请注意if 条件处理具有相同值的潜在重复更新。

这里有一个working plunk 供你玩