⚓
localStorageが状態管理にすごい便利
まず！
この記事は？
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>
シンプルで扱いやすいね。
日付やチェックボックスなどの状態保持とかだったらいいと思います。
追記
最近、例外が生まれてきているらしい。
AppleのSafariに搭載されているトラッキング防止機能ITP（Intelligent Tracking Prevention）がアップデートされ、最新のITP202003だとlocalStorage有効期限が７日間になるらしい。
Discussion