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

问题描述：

我有两页：my-view1和my-view2。在my-view1上，我有两个按钮用于添加和删除LocalStorage中的数据。在my-view2上，我有两个简单的div，即READ（显示）总价值，以及总计过去6个月的价值。Polymer - JavaScript - 数据绑定：实时更新？

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

这是一个使用my-view2的plnkr，所以你可以undestrand我想要做的事情。

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

我怎样才能做到这一点？

播放动态当过值改变可以使用的WebSockets为更新您的网页（图2），或者你有你可以使用eventstream任何后端那个目的。而对于当前的情况，只要使用setinterval检查每一秒你localstorage如果有任何变化反映你页面的变化。 –

非常感谢您的回复！我目前正在将此页作为PWA构建。即使离线，Websockets也能工作吗？另外，使用setInterval将让应用程序睡眠？或者它会连续运行？ – unkn0wnx

setInterval将在脱机模式下工作，是的，你可以设置一个逻辑，以确定如果应用程序处于睡眠模式，你可以停止间隔检查，当从睡眠模式唤醒时，你可以恢复。但是对于websocket，您需要主动连接互联网，如果您正在使用myview-1和myview-2，则可以使用发布消息来交流和更新my-view-2。 –

答

你可以听storage事件触发和更新我的-view2的一些道具，当你更新的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>

EDIT（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您与

你好！感谢您的回复。我已经将代码添加到'my-view2'页面，但我仍然无法使其工作。我甚至尝试将“值替换”替换为console.log以查看它是否读取LocalStorage，但它不会。我很确定我在代码中做了一些坏事，但却无法理解它在哪里。我做了一个plnkr：https://plnkr.co/edit/HCIw7ExZ2rg7XEjQMLZi?p=catalogue – unkn0wnx

由于此处描述的行为，此解决方案无法自行工作https://*.com/a/4679754/2533680，I将通过一个工作示例更新我的答案。 –

所以我没有办法做到这一点？ – unkn0wnx

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

相关推荐