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

JavaScriptでページの読み込み中、ローディング画面を表示する方法

2023.02.15
9643
JavaScript

HTMLのformでsubmitした時、ページ遷移させない方法【JavaScript】

2022.10.09
9779
JavaScript

JavaScriptを使い、目次をプラグイン無しで自動生成する方法

2022.10.31
1428
JavaScript

【JavaScript】マウスホイールした時のスクロール量を表示する方法

2023.02.07
2651