ローカルストレージの操作を「vue-ls」で行う

by kabanoki

HTML

<script src="https://unpkg.com/[email protected]/dist/vue-ls.min.js"></script>
<div id="app">
  <p>
      <button @click="doReload">ページリロード</button>
      <button @click="doSessionClear">セッションを削除</button>
  </p>
  <input type="text" v-model="inputValue"></input>
  <p>{{getValue()}}</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

#app {
  padding: 20px;
}

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

Vue

const Storage = window.VueStorage;
Vue.use(Storage);

let app = new Vue({
  el: '#app',
  data: {
    inputValue:''
  },
  methods:{
    doReload: function(){
      // ページのリロード
      location.reload();
    },
    doSessionClear: function(){
      // ローカルストレージを削除する
      if(confirm('セッションを削除します')){
        Vue.ls.clear();
      }
    },
    getValue: function(){
      // 初回アクセス時はローカルストレージのデータを読む
      if(this.inputValue == ''){
        return Vue.ls.get('lsValue');
      }
      return this.inputValue;
    }
  },
  watch: {
    inputValue: function(value){
      //inputValueが更新される度にローカルストレージを更新
      Vue.ls.set('lsValue', value, 60 * 60 * 1000);
    }
  }
});