Polymer 2 - Do something on local/session storage change.

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="set-dog-name.html">
  <link rel="import" href="display-dog-name.html">
</head>

<body>
  <display-dog-name></display-dog-name>
  <set-dog-name></set-dog-name>
</body>

</html>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-input/iron-input.html">

<dom-module id="set-dog-name">

  <template>
    <form action="saveToLs">
      <iron-input bind-value="{{dogName}}">
        <input is="iron-input" placeholder="Change your dog's name...">
      </iron-input>
      <button type="submit" on-click="saveToLs">Save</button>
    </form>
    
  </template>

  <script>
    class SetDogName extends Polymer.Element {
      static get is() { return 'set-dog-name'; }

      static get properties() {
        return { dogName: { type: String } };
      }
      
      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);
      }
      
    }
    customElements.define(SetDogName.is, SetDogName);
  </script>

</dom-module>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">

<dom-module id="display-dog-name">

  <template>
    <!-- bind to the "owner" property -->
    <p>The name of my dog is <b>[[dogName]]</b></p>

  </template>

  <script>
    class DisplayDogName extends Polymer.Element {

      static get is() { return 'display-dog-name'; }
      
      // configure the owner property
      static get properties() {
        return {
          dogName: {
            type: String,
            value: 'Bender'
          },
          boundCallback: {
            type: Object
          }
        };
      }
      
      connectedCallback() {
        super.connectedCallback();
        
        const lsDogName = localStorage.getItem('myDog');
        if (typeof lsDogName === 'string' && lsDogName.length > 0) {
          this.set('dogName', lsDogName);
        }
        
        this.boundCallback = this.handleStorageUpdate.bind(this);
        window.addEventListener('storage', this.boundCallback);
      }
      
      disconnectedCallback() {
        window.removeEventListener('storage', this.boundCallback);
      }
      
      handleStorageUpdate(e) {
        const currentDogName = this.get('dogName');
        if (e.key !== 'myDog' || e.newValue === currentDogName) return; 
        this.set('dogName', e.newValue);
      }
      
    }
    customElements.define(DisplayDogName.is, DisplayDogName);
  </script>

</dom-module>