HTMLのストレージ機能への配列の入出力でハマったこと

sessionStorageとlocalStorageに配列を保存するときにエラーがでて嵌ったので、同じような人がいれば参考までに。

そもそも

詳細は下記をご参考ください。

sessionStorageをつかってみる
https://qiita.com/uralogical/items/ade858ccfa164d164a3b

失敗パターン

今回もVue.jsベースで話していきますが、他フレームワークでも同じです。

page1.vue

<template>
  <div>
    <div>
      <button @click="test">テスト</button>
      <ul>
        <li v-for="item in list" v-bind:key="item.id">
          {{ item.id }}/{{ item.name }} 
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            list:[]
        }
    },
    methods: {
        test: function() {
            const data = [
                { id: 1, name: 'test1'},
                { id: 2, name: 'test2'},
                { id: 3, name: 'test3'}
            ]
            window.sessionStorage.setItem("data", data)
            this.list = window.sessionStorage.getItem("data")
        }
    }
}
</script>

なぜ？

sessionStorageの格納情報を確認したところ、どうやら正しく情報が格納されていない様子。。。

対応方法

JSON配列に変換し使います。

page1.vue

<template>
  <div>
    <div>
      <button @click="test">テスト</button>
      <ul>
        <li v-for="item in list" v-bind:key="item.id">
          {{ item.id }}/{{ item.name }} 
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            list:[]
        }
    },
    methods: {
        test: function() {
            const data = [
                { id: 1, name: 'test1'},
                { id: 2, name: 'test2'},
                { id: 3, name: 'test3'}
            ]
            window.sessionStorage.setItem("data", JSON.stringify(data))
            this.list = JSON.parse(window.sessionStorage.getItem("data"))
        }
    }
}
</script>

うまくいきました！