WebStorageとは

HTML5から導入されたブラウザにデータを保有する仕組み。
localStorageとsessionStorageの二つがあり、それぞれ有効期限が異なる。らしい。

WebStorage	有効期限
localStorage	無期限
sessionStorage	ブラウザが閉じられた時

書き方

値設定

localStorage.setItem('set_local', this.local);
sessionStorage.setItem('set_session', this.session);

呼び出し

const val_local = localStorage.getItem('set_local');
const val_session = sessionStorage.getItem('set_session');

使ってみる（Vue.js）

<body>
    <div id="app">
        <p>localStorage：<input type="text" v-model="local" v-on:change="setLocal"></p>
        <p>sessionStorage：<input type="text" v-model="session" v-on:change="setSession"></p>
    </div>
 

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() {
                var val_local = localStorage.getItem('set_local');
                var val_session = sessionStorage.getItem('set_session');
                return {
                    local: val_local,
                    session: val_session,
                }
            },
            methods: {
                setLocal: function (event) {
                    localStorage.setItem('set_local', this.local);
                },
                setSession: function (event) {
                    sessionStorage.setItem('set_session', this.session);
                }
            }
        });
    </script>
</body>

localのほうはブラウザ閉じても保持されて、sessionのほうは破棄されることを確認。