0

問題点

vue.jsで簡易アプリをしているのですが、localStorageを呼び出すタイミングが上手くいきません。

エラー箇所

下記のコードで、localStorageを呼び出しているつもりなのですが、データが消えてしまいます。

mounted: function() {
    this.items = JSON.parse(localStorage.getItem('items')) || [];
  },

該当のソースコード

<div id="app">
    <ul v-for="item in items">
      <li>{{item.id}}</li>
    </ul>
    <p @click="addItem">
     クリックで追加
    </p>
 </div>
var vue = new Vue({
    el:'#app',
  data: {
      items:[
     {id:'a',text:'aaa'},
     {id:'b',text:'bbb'}
    ]
  },
  methods: {
    addItem:function(){
     let todo = {id:'c', text:'ccc'}
      this.items.push(todo)
    }
  },
  watch: {
    items: {
      handler: function() {
        localStorage.setItem('items', JSON.stringify(this.items));
      },
      deep: true
    }
  },
  mounted: function() {
    this.items = JSON.parse(localStorage.getItem('items')) | [];
  },
})

試したこと

mountedのタイミングが誤っていると考え、vue.jsのライフサイクルを各種試してみましたが、上手くいきませんでした。

URL

githubのURL
https://github.com/kondo97/demo.git

動作確認用のURL
https://kondo97.github.io/demo/

その他

お分かりになる方がいらっしゃいましたら、ご教授いただけると大変助かります。
よろしくお願いいたします。

追記

本投稿はマルチポストとなっております。
https://teratail.com/questions/350335#reply-479899

1

1 件の回答 1

0

LocalStorageにデータがない状態で以下を実行します

JSON.parse(localStorage.getItem('items'))
=> null

nullと空配列のビット論理和を実行すると 0 になります

null | []
=> 0

初期化で0をitemsに代入したためpushメソッドのコールでエラーとなっています

論理和(||)を利用すると期待通りになります

this.items = JSON.parse(localStorage.getItem('items')) || [];

追記
修正後は一度ローカルストレージをクリアしてください(itemsが保存済みのため)
サイトを開いてディベロッパーツールのコンソールで localStorage.clear() を実行すればよいです

1
  • 空配列の指定が誤っていることが判明しました。itemsに初期値を入れておきたかったのですが、空配列を指定することで消えていたようです(当然ではありますが、、)。ローカルストレージを呼び出す際に、ローカルストレージに初期値を保存→呼び出しという手順を取りました。ご回答ありがとうございました。
    – kondo
    Commented 2021年7月20日 2:37

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。