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

const person = { name: 'Alex' }

// NG：オブジェクトをそのまま渡すと、文字列に変換されて壊れる
localStorage.setItem('user', person)
console.log(localStorage.getItem('user'))        // "[object Object]"

// OK：JSON 文字列にして保存し、読むときに戻す
localStorage.setItem('user', JSON.stringify(person))
console.log(JSON.parse(localStorage.getItem('user')))   // { name: 'Alex' }

// composables/useLocalStorage.js
import { ref, watch, onMounted, onBeforeUnmount } from 'vue'

// localStorage が「使える」とは限らない（プライベートブラウズ等で、容量0になることがある）
function storageAvailable() {
  try {
    const test = '__storage_test__'
    localStorage.setItem(test, test)
    localStorage.removeItem(test)
    return true
  } catch (e) {
    return false
  }
}

export function useLocalStorage(key, defaultValue) {
  const available = storageAvailable()

  // 読み込み：保存されていない、壊れている、使えない場合は、既定値を返す
  function read() {
    if (!available) return defaultValue
    try {
      const raw = localStorage.getItem(key)
      return raw === null ? defaultValue : JSON.parse(raw)
    } catch (e) {
      return defaultValue
    }
  }

  const state = ref(read())

  // 保存：値が変わるたびに書き込む（v-model の値の変化に反応するので、日本語入力の変換中も安全）
  watch(
    state,
    (value) => {
      if (!available) return
      try {
        localStorage.setItem(key, JSON.stringify(value))
      } catch (e) {
        // 容量超過など。保存に失敗しても、アプリは動かし続ける
      }
    },
    { deep: true }
  )

  // 他のタブで変更されたら、こちらにも反映する
  // （storage イベントは、変更したタブ自身には発生しない）
  function onStorage(event) {
    if (event.storageArea !== localStorage || event.key !== key) return
    state.value = read()
  }
  onMounted(() => window.addEventListener('storage', onStorage))
  onBeforeUnmount(() => window.removeEventListener('storage', onStorage))

  return state
}

<script setup>
import { useLocalStorage } from './composables/useLocalStorage'

// キーにバージョンを付けておくと、保存する形を変えたときに、古いデータと区別できる
const message = useLocalStorage('myapp:v1:message', '')
</script>

<template>
  <label for="message">メモ</label>
  <input id="message" v-model="message">
  <p>保存されたメモ：{{ message }}</p>
</template>

<script setup>
import { useLocalStorage } from './composables/useLocalStorage'

// オブジェクトも、そのまま渡せる（内部で JSON に変換して保存する）
const settings = useLocalStorage('myapp:v1:settings', { theme: 'light', fontSize: 16 })
</script>

<template>
  <select v-model="settings.theme">
    <option value="light">ライト</option>
    <option value="dark">ダーク</option>
  </select>
  <input v-model.number="settings.fontSize" type="number" min="10" max="32">
</template>