Allow remove Item on init before value is synced with watched property

[nicholaswmin]

Feature Request:

A property(e.g remove-stored-item-on-init) that if set to true would:

• remove the stored item from localStorage
• before syncing the value of the stored item to the property the property on which it is binded

So instead of bringing the value from localStorage and syncing it with the element property on which it is binded, it is removed.

A use case for this

Note: I reckon the use-case of the element described below would be fairly common, thus why I insist/prefer if there was an official prop we could set.

This is extremely helpful on cases where <iron-localstorage> is used as complementary functionality in login-like elements.

A loggedInUser is saved/synced in localStorage and we want to force-logout the user without the loggedInUser observers of the property firing with the old loggedInUser value that preexists in localStorage.

---

Example:

Here's a stripped down version of what I'm doing.

• <iron-localstorage> is within a <dom-if> so it doesn't initialize automatically - I need to "truthify" a prop, _syncLoggedInUserInStorage to stamp it, in which case syncing with loggedInUser begins.
• If forceLogout prop is preset to true on the element:
  • I manually (via native localStorage API methods) remove the loggedInUser from localStorage
  • I thuthify _syncLoggedInUserInStorage so syncing begins - at this point the value fetched from localStorage is null, thus other elements binding to loggedInUser ignore it.

If I don't manually override the loggedInUser in localStorage it will re-sync the old value with the loggedInUser as soon as I activate syncing with <iron-localstorage>.

Long story short - It doesn't feel "right" to use the native localStorage methods. It would be far better if I could destroy/remove the saved localStrage key/value before it syncs with the binded prop via an official property on <iron-localstorage>

<dom-module id="login-card">
  <template>
      <template is="dom-if" if="{{_syncLoggedInUserInStorage}}">
        <iron-localstorage name="loggedInUser" value="{{loggedInUser}}"></iron-localstorage>        
      </template>
  </template>
<script>
  HTMLImports.whenReady(function() {
    "use strict";

    Polymer({
      is: "login-card",
      properties: {
        loggedInUser: {
          type: Object,
          notify: true,
          observer: "_loggedInUserExists"
        },
        _syncLoggedInUserInStorage: {
            type: Boolean,
          value: false
        },
        forceLogout: {
          type: Boolean,
          value: false
        }
      },

      attached: function() {
        window.loginCard = this;
        /* @HACK
         * if `forceLogout` is set externally to `true`, we nullify `loggedInUser` value
         * *manually* in localStorage (instead of going via `<iron-localstorage`>), 
         * so it won't resync the old value when reactivating it and fire the `_loggedInUserExists` observer.
         */
        if (this.forceLogout) {
          if (localStorage.getItem("loggedInUser")) {
            localStorage.removeItem("loggedInUser");
          }
        } 
        this.set("_syncLoggedInUserInStorage", true);
      },

      _loggedInUserExists: function() {
        if (this.loggedInUser) {
          console.log("logged in user exists");
        }
      }
    });
  });
</script>
</dom-module>

<login-card force-logout="true"></login-card>