【Vue.js】Local Storageでデータを永続化させる

Local Storageとは

JavaScriptを使ってWebブラウザにデータを保存できる仕組みです

5~10MB程度のデータを永続化できます

保存された内容はChrome DevToolsで確認できます

今回はVue.jsで見ていきます

保存する

保存するにはlocalStorage.setItem()を使用します

第1引数にキー
第2引数にバリュー
を渡します

<template>
  <div class="container">
    <button @click="set()">保存</button>
  </div>
</template>

<script>
export default {
  methods: {
    set() {
      localStorage.setItem('name', '田中')
    }
  }
}
</script>

簡単に「保存ボタン」が押されたらデータを保存するようにします

---

第2引数に複数の値を渡す場合はJSON.stringify()を使用しJSON文字列へ変換する必要があります

<template>
  <div class="container">
    <button @click="set()">保存</button>
  </div>
</template>

<script>
export default {
  methods: {
    set() {
      localStorage.setItem('obj', JSON.stringify({
        id: 1,
        name: 'tanaka',
        age: 20
      }))
    }
  }
}
</script>

---

取得する

データを取り出すにはlocalStorage.getItem()を使用します
現状JSON形式でデータが保存されているのでJSON.parse()でJavaScriptのオブジェクトに変換する必要があります

mountedにデータを取得する記述を用意しレンダリングします

<template>
  <div class="container">
    <button @click="set()">保存</button>
    <p>{{this.info.id}}</p>
    <p>{{this.info.name}}</p>
    <p>{{this.info.age}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {}
    }
  },
  mounted() {
    this.info = JSON.parse(localStorage.getItem('obj'))
  },
  methods: {
    set() {
      localStorage.setItem('obj', JSON.stringify({
        id: 1,
        name: 'tanaka',
        age: 20
      }))
    }
  }
}
</script>

永続化されているのでリロードしても消えません

削除する

最後です

localStorage.removeItem();で引数に渡したキーに紐づく値を削除できます。

また、localStorage.clear();で全ての値を削除できます

localStorage.removeItem('obj');

localStorage.clear();