JavaScriptでブラウザにデータを保存する方法【Local Storageを使おう】

JavaScriptを使って、サイト訪問者のブラウザにデータを保存させたい。

本記事ではこのような悩みを解決します。

Local Storageを使おう

JavaScriptを使ってブラウザにデータを保存させるには、Local Storageを使います。

Local Storageとはweb APIの一種です。

主要なブラウザでは5MBまでデータを保存する事が出来ます。

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でブラウザにデータを保存する方法を紹介しました。

以上で解説を終わります。