Question

我有两个页面：my-view1和my-view2。在my-view1上，我有两个按钮，用于添加和删除LocalStorage中的数据。在my-view2上，我有两个简单的div，即READ（显示）总值，以及最近6个月的总值。

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

这是一个带有my-view2的plnkr，因此您可以取消我想要做的事情。

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

我该怎么做？

Answer 1

当您更新localStorage时，您可以收听<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>事件以触发并更新my-view2中的某些道具：

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);
}

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

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

......在听力方面：

if

请注意dynamic code条件处理可能具有相同值的重复更新。

这是here供你玩

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

1 个答案: