ローカルストレージ永続カウンター
ページを再読み込みしても数値が消えない localStorage 永続カウンター です。ボタンを押すたびに数を増減し、その値をブラウザの localStorage に保存します。次回アクセス時には保存された値を読み出して表示に反映するため、リロードしてもタブを閉じても数字が保持されます。
解説
ページを再読み込みしても数値が消えないlocalStorage 永続カウンターです。ボタンを押すたびに数を増減し、その値をブラウザの localStorage に保存します。次回アクセス時には保存された値を読み出して表示に反映するため、リロードしてもタブを閉じても数字が保持されます。数字が変わるときは一瞬だけ scale で拡大するさりげない演出を加え、更新が伝わりやすくしています。リセットボタンで値をゼロに戻せます。
こんな用途に
- 「いいね」や閲覧回数の簡易記録
- 学習アプリの達成数やクリック回数の保持
- サーバーを使わない設定値や状態の記憶
保存先のキー名を変えれば複数のカウンターを共存させられます。localStorage はそのブラウザ・その端末の中だけで保持される仕組みで、別の端末とは同期しません。閲覧履歴を消すと値も消えます。多人数で共有したい数値や厳密な集計にはサーバー側の保存が必要です。あくまで端末ローカルの軽い記憶用途に向いています。文字列で保存されるため取り出し時の数値変換に注意してください。
よくある質問
別の端末でも同じ数字になりますか
なりません。localStorage はそのブラウザと端末の中だけにデータを保存する仕組みで、他の端末やブラウザとは同期しません。端末ごとに別の値になります。
保存した数字はいつ消えますか
ユーザーがブラウザの閲覧データやサイトデータを削除すると消えます。通常のリロードやタブを閉じる操作では消えず、保持され続けます。