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

Alert: Unauthorized hook call and Exception: Cannot access properties of null (reading 'useState')

Having difficulty initializing jQuery DataTables upon button click with an Ajax request

I need help getting my Vue.JS project to function properly when it is deployed on a server

Creating an overlay button within various containing divs requires setting the position of the button

How can a JavaScript map be created with string keys and values consisting of arrays containing pairs of longs?

Empowering Components with React Hooks

php After the ajax request, the array_push function is failing to add values to the

Ruby on Rails and JSON: Increment a counter with a button press

Is the condition failing to evaluate for all td elements?

The filtering feature in AngularJS ng-options is not functioning correctly

The property of userNm is undefined and cannot be set

Tips for stopping Vue.js automatic merging of CSS classes

Is it possible to use Vuelidate for password validation in Vue.js?

Can Typescript classes be hoisted if I use two classes in my code?

"Browser compatibility issues: 404 error on post request in Firefox, while request is

What could be causing issues with my jQuery POST call?

React and Redux encounter an issue where selecting a Select option only works on the second attempt, not the first

After the component has been initialized for the second time, the elementId is found to be null

"Utilizing Javascript in an ERB view file within the Rails framework

What steps should I take when dealing with two dynamic variables in a mediator script within the WSO2 ESB?