

### 問題点

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

### エラー箇所

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

[code]

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

### 該当のソースコード

[code]

    <div id="app">
        <ul v-for="item in items">
          <li>{{item.id}}</li>
        </ul>
        <p @click="addItem">
         クリックで追加
        </p>
     </div>
    
[/code]

[code]

    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')) | [];
      },
    })
    
[/code]

### 試したこと

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>


CC BY-SA 4.0
2021-07-19T14:08:25.017
78299
2021-07-20T02:36:16.390
2021-07-20T02:36:16.390
47310
47310
question
javascript vue.js
localStorageを呼び出すタイミング


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

[code]

    JSON.parse(localStorage.getItem('items'))
    => null
    
[/code]

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

[code]

    null | []
    => 0
    
[/code]

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

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

[code]

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

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


CC BY-SA 4.0
2021-07-20T01:50:19.760
78310
2021-07-20T02:01:58.907
2021-07-20T02:01:58.907
298
298
78299
answer