Is real-time updating possible with data binding in Polymer and JavaScript?

Question

Is real-time updating possible with data binding in Polymer and JavaScript?

I have a scenario where I am working with two pages: my-view1 and my-view2. On my-view1, there are two buttons that manipulate data stored in LocalStorage. On my-view2, there are two simple div elements that display the total value and the total value in the last 6 months.

The issue is that on my-view2, the displayed values do not update unless the page is manually refreshed. I want the values on my-view2 to automatically update every time the page is loaded or viewed, even if it's cached.

I have provided a plnkr link showcasing my-view2 so you can better understand what I am trying to achieve.

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

Any suggestions on how I can accomplish this?

javascript data-binding polymer

Answer 1

Answer №1

To trigger an update in my-view2 when localStorage is updated, you can listen to the storage event:

<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>

For a workaround due to the storage event not being triggered on the window making the change, you can manually trigger a custom storage event like this:

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

On the receiving end, handle the storage update like this:

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

Remember to use the if statement to avoid processing duplicate updates with the same value.

Feel free to experiment with this concept using this example plunk.

Answer 2

To trigger an update in my-view2 when localStorage is updated, you can listen to the storage event:

<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>

For a workaround due to the storage event not being triggered on the window making the change, you can manually trigger a custom storage event like this:

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

On the receiving end, handle the storage update like this:

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

Remember to use the if statement to avoid processing duplicate updates with the same value.

Feel free to experiment with this concept using this example plunk.

Is real-time updating possible with data binding in Polymer and JavaScript?

Answer №1

Similar questions

Steps for creating a table with a filter similar to the one shown in the image below

Dealing with validations in a personalized aid

What is the process by which a JavaScript Date object is converted to a string when you log it to the

Vanilla JavaScript code that utilizes regex to transform JSON data into an array of blocks, while disregarding any

Error occurred: Undefined module imported

Angular 2 Element Selection: Dealing with Unrendered Elements

When attempting to import Quill-blot-formatter with react-quill via next/dynamic, the registration process fails and continues to display a loading message

What is the best way to update the context while iterating through a jQuery each loop?

using app.use to directly pass arguments without delay (NODE.JS)

"The `Head.js` method called `.js()` allows for dynamic

retrieve information in json format from a specified web address

Is it possible to distinguish and identify each separate window when a user opens multiple instances of your site?

Enter a socket.IO chat room upon accessing an Express route

Guide on linking draggable elements

I am interested in extracting specific data from the JSON response

The function req.send('null') does not exist in the Node.js MySQL library

Can CSS be used for creating unique color combinations?

Script on Tampermonkey executed prior to page loading

Unable to retrieve scripts upon returning to the main page of a Jquery website

Tips for efficiently serving a static file without triggering a disk read