JavaScriptでブラウザにデータを保存する方法【Local Storageを使おう】
JavaScriptを使って、サイト訪問者のブラウザにデータを保存させたい。
本記事ではこのような悩みを解決します。
Local Storageを使おう
JavaScriptを使ってブラウザにデータを保存させるには、Local Storageを使います。
Local Storageとはweb APIの一種です。
主要なブラウザでは5MBまでデータを保存する事が出来ます。
実装サンプル
See the Pen
Local storageでブラウザにデータを保存 by Kohei (@kouk05)
on CodePen.0
Local Storageを使った実装サンプルです。
入力欄に任意のテキストを入力。
保存ボタンを押すと入力したテキストが保存されます。
読込ボタンを押すと保存されたテキストがページに表示されます。
削除ボタンを押すと保存されたテキストが削除されます。
実装方法は以下の通りです。
Local Storageの使い方
JavaScriptでLocal Storageに保存・読み込み・削除する方法を紹介します。
データを保存する
localStorage.setItem('key', value);
Local Storageに保存するコード例です。
保存するにはlocalStorage.setItemを使います。
第一引数に任意のkey値を設定。（読み込み・削除する時に使います。）
第二引数に保存したい値を設定します。
保存されたデータを読み込む
localStorage.getItem('key');
Local Storageから保存されたデータを読み込むコード例です。
読み込むにはlocalStorage.getItemを使います。
引数にlocalStorage.setItemで設定したkey値を指定します。
保存されたデータを削除
localStorage.removeItem('key');
Local Storageに保存されたデータを削除するコード例です。
削除にはlocalStorage.removeItemを使います。
引数にlocalStorage.setItemで設定したkey値を指定します。
まとめ
Local Storageを使い、JavaScriptでブラウザにデータを保存する方法を紹介しました。
以上で解説を終わります。