localStorageが状態管理にすごい便利

2022/11/20に公開約1,400字

まず!

この記事は?

localStorageの簡単な使い方についてまとめた記事。
おそらく貴方は、ブラウザの状態管理の方法について調べていて、「localStorage」という存在にたどり着いたのだろう。

localStorageとは?

簡単に言うと、ブラウザの状態をローカルに保存できる機能。
あれ?それCookieじゃん。

そうです。Cookieと似ています。

違いは大きく二つあるそうです。

  • 保存期間 (localStorage→半永久的。Cookie→期間制限あり。)
  • データ容量 (localStorage→5MB。Cookie→4KB)

どこで見れる?

開発ツール > Application > Local Storage
平文で表示されますので、そこで確認できます。

そう平文です。セキュリティ的にガバガバです。がばいばあちゃんです。
なので、ここで使うのは大前提として見られても問題ない情報になります。

どうやって扱う?

データをセット

localStorage.setItem('key', 'value');
localStorage.key = 'value';

データを取得

localStorage.getItem('key');
localStorage.key;

データを削除

localStorage.removeItem('Key');
// 初期化
localStorage.clear()

Vue3でのサンプルコード

<script setup>
import { ref } from 'vue'

const inputText = ref('')

const saveLocal = () => {
  console.log('click save button')
  const formElement = document.getElementById('input-text').value
  localStorage.setItem('inputText', formElement)
}

inputText.value = localStorage.getItem('inputText')
</script>

<template>
  <h1>ローカルストレージ</h1>
  <div>
    <input type='text' id="input-text" name='input-text' v-model="inputText">
    <button @click="saveLocal">ローカルに保存</button>
  </div>

</template>

シンプルで扱いやすいね。
日付やチェックボックスなどの状態保持とかだったらいいと思います。

Discussion

ログインするとコメントできます