【Vue.js】ローカルストレージを使った状態管理｜ページ更新後も値を保持

Vue.jsでアプリケーションを開発していると、ページをリロードしても状態を保持したいケースがあります。例えば、テーマの設定やフォーム入力内容、簡易なログイン状態など、永続的なデータ保持が必要な場面で便利なのが「ローカルストレージ」です。本記事では、Vue.jsでローカルストレージを活用して状態を保持する基本的な実装方法を解説します。

ローカルストレージとは

ローカルストレージはブラウザに保存されるキーと値のペア形式のデータです。容量は5MB程度で、ユーザーが明示的に消さない限り保持されます。Vue.jsと組み合わせれば、状態の永続化が可能になります。

基本的な使用方法

ローカルストレージはlocalStorage.setItem()とlocalStorage.getItem()で値の保存・取得が可能です。以下に基本の例を示します。

<template>
  <div>
    <input v-model="message" @input="saveMessage" />
    <p>保存されたメッセージ: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    const saved = localStorage.getItem('savedMessage');
    if (saved) {
      this.message = saved;
    }
  },
  methods: {
    saveMessage() {
      localStorage.setItem('savedMessage', this.message);
    }
  }
};
</script>

注意点

ローカルストレージにはセキュリティの制約があります。JavaScriptからしかアクセスできないため、重要な個人情報の保存には適しません。また、同一オリジンでのみ利用できる点にも留意が必要です。

VuexやPiniaと併用する方法

VuexやPiniaと併用することで、アプリ全体の状態をローカルストレージに保存し、ページを跨いだ状態管理も可能になります。以下のようにVuexのsubscribeを使えば、ミューテーションごとにストレージへ自動保存することもできます。

store.subscribe((mutation, state) => {
  localStorage.setItem('appState', JSON.stringify(state));
});

復元時はJSON.parse()でデータを取り出して、ストアに反映します。

まとめ

Vue.jsでローカルストレージを使えば、ユーザーの操作状態や設定を維持し、UXを向上させることができます。簡易的な状態保持に向いており、小規模なアプリや単一機能の状態保存には非常に有効です。より高度な状態管理が必要な場合は、VuexやPiniaとの併用も検討してみてください。