Search code examples
polymerlocal-storage

Polymer : Uncaught TypeError: this.saveToCache is not a function


My code is something like this. It occurs error this.saveToCache is not function. Can anyone help? thanks in advance.

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymer/polymer-element.html">
<link rel="import" href="shared-styles.html">

<link rel="import" href="../bower_components/iron-localstorage-behavior/iron-localstorage-behavior.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">

<dom-module id="my-app">
    <template>
        <paper-button on-click="_insertData">Add<paper-button>
    </template>
    <script>
        class MyApp extends Polymer.Element {
            static get is() { return 'my-app'; }
             _insertData(){
                var key = 123;
                var value = Math.random();
                this.saveToCache(key, value).then(() => {
                    alert("Added");
                });
            }
        }

        window.customElements.define(MyApp.is, MyApp);
    </script>
</dom-module>

Solution

  • You have imported your behavoir, iron-localstorage-behavoir, but it does not seem that you are adding it to your element.

    Since you're using the class syntax I guess that this is Polymer 2.x, so you can see how it needs to be done here.

    So your code would become:

    <link rel="import" href="../bower_components/polymer/polymer.html">
    <link rel="import" href="../bower_components/polymer/polymer-element.html">
    <link rel="import" href="shared-styles.html">
    
    <link rel="import" href="../bower_components/iron-localstorage-behavior/iron-localstorage-behavior.html">
    
    <dom-module id="my-app">
        <template>
            <paper-button on-click="_insertData">Add<paper-button>
        </template>
        <script>
            class MyApp extends Polymer.mixinBehaviors([Polymer.IronLocalStorageBehavior], Polymer.Element) {
                static get is() { return 'my-app'; }
                 _insertData(){
                    var key = 123;
                    var value = Math.random();
                    this.saveToCache(key, value).then(() => {
                        alert("Added");
                    });
                }
            }
    
            window.customElements.define(MyApp.is, MyApp);
        </script>
    </dom-module>