Written by Kasumi

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

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

目次

関連記事

JavaScript

IEブラウザか、その他以外のブラウザかを判定し、条件分岐・判別する方法【Javascript】

更新日:2022.09.09
394
JavaScript

【JavaScript初心者向け】配列要素を追加・上書き・削除する方法

2022.08.22
436
JavaScript

【JavaScript】受け取ったデータが文字列 or 数値どちらなのか判定する方法【typeof演算子を使おう】

2022.11.29
331
JavaScript

JavaScriptでURL末尾のアンカー(ハッシュ)を取得・条件分岐する方法

2022.10.28
191