JavaScript localStorage徹底ガイド：ブラウザへのデータ保存方法と実践例
Webアプリケーションは、あっという間に複雑になってしまうものです。開発者としての経験から学んだことの一つは、プレーンなJavaScriptでも、使い方次第で非常に多くのことができるという点です。
localStorage APIは強力な組み込み機能で、サーバーを必要としないシンプルなアプリケーションにおいて、データベースを使う必要性を取り除いてくれます。このAPIを使えば、データをローカルに保存し、アプリケーションから自由にアクセスできるようになります。
このガイドでは、JavaScriptでlocalStorageメソッドを使う方法について解説します。フォームの入力内容を保存し、後でWebページ上で復元する実践例も紹介します。それでは始めましょう！
localStorageとは？
localStorageはWeb Storage APIの一部です。このAPIを使うと、ユーザーのブラウザ内にデータを保存し、アプリケーションからアクセスできるようになります。
Web Storage APIが便利なのは、ユーザーセッションに関するすべてのデータをデータベースに送る必要がなくなる点です。たとえば、ユーザーがサイトでダークモードを有効にした場合、その情報はクライアント側で管理できます。また、ユーザーがフォームを後で保存したい場合も、未完成のフォームをデータベースに格納する必要はありません。
Webストレージには2種類あります。1つ目はlocalStorageで、ユーザーがブラウザのタブを閉じてもデータが残り続けるものです。Cookieと異なり、localStorageのデータには有効期限がありません。2つ目はsessionStorageで、こちらはセッションが終了するまで（つまりブラウザが閉じられるまで）データが保持されます。
この記事ではlocalStorageオブジェクトに焦点を当てますが、sessionStorageもまったく同じ構文で使えるため、必要に応じて簡単に置き換えることが可能です。
localStorageの基本的な使い方
実践例に入る前に、localStorageが提供する主なメソッドを見ていきましょう。
localStorageにエントリを作成するには、setItem()メソッドを使用します：
localStorage.setItem("name", "Linda Carlton");
console.log(localStorage);
このコードを実行すると、次のような結果が返されます：
{ name: "Linda Carlton", length: 1 }
localStorageはアイテムをキーと値のペア（key:value）で保存します。この例では「name」というキーを作成し、その値として「Linda Carlton」を設定しました。
console.log()ステートメントでlocalStorageの中身を出力することで、値が正しく追加されたことを確認できます。また、同じキーに対してsetItem()を呼び出せば、既存の値が新しい値で上書きされるため、値の更新も同じコードで行えます。
localStorageから特定の値を取得するには、getItem()メソッドを使用します：
localStorage.getItem("name");
このコードは次を返します：
Linda Carlton
localStorageからデータを削除するには、2つのメソッドがあります：
removeItem()：指定した1つのアイテムだけを削除するclear()：localStorage内のすべてのアイテムを削除する
たとえば、「name」アイテムを削除したい場合は、次のコードを使います：
localStorage.removeItem("name");
console.log(localStorage);
このコードを実行すると、次の結果が返されます：
{ length: 0 }
注目すべきは、localStorageを空にしても「length」というプロパティが残っている点です。これは、localStorageにいくつのアイテムが保存されているかを示すものです。「name」エントリを削除したので、現在は何も保存されていません。
また重要な点として、localStorageには文字列しか保存できないことに注意してください。オブジェクトや配列を保存したい場合は、JSON.stringify()で文字列に変換して保存し、読み出す際にJSON.parse()で元に戻すのが一般的です。
localStorageを使ったフォーム保存機能の構築
長いフォームの記入を求められた経験は誰にでもあるでしょう。本当に重要なものでない限り、後でそのフォームに戻って続きを書きたいものです。だからこそ、多くのサイトには入力内容を後で使えるように保存する「フォーム保存」機能が備わっています。
こうした機能の中にはデータベースでデータを管理しているものもありますが、localStorageメソッドを使えば、軽量版を手軽に作ることができます。
フロントエンドの作成
今回は、地元の茶館「The Little Tea House」向けの顧客フィードバックフォームを作成します。最初のステップは、Webアプリケーションのフロントエンドを作ることです。index.htmlというファイルを作成し、以下のコードを貼り付けてください：
<!DOCTYPE html>
<html>
<head>
<title>The Little Tea House Feedback</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<div>
<h1>The Little Tea House: Customer Feedback</h1>
<p>How was your experience at The Little Tea House? We'd love to learn more!</p>
<form>
<label for="name">Name: </label>
<input id="name" type="text" /><br /><br />
<label for="email">Email: </label>
<input id="email" type="email" /><br /><br />
<label for="feedback">Message: </label><br /><br />
<textarea id="feedback"></textarea><br /><br />
<button id="saveButton">Save form</button>
<button id="retrieveButton">Retrieve form</button>
</form>
</div>
<script src="./form.js"></script>
</body>
</html>
このコードは、フォームフィールドを備えた基本的なHTMLページを作成します：
これでサイトに必要な要素はすべて揃いましたが、見た目を良くするために少しスタイルを追加しましょう。styles.cssというファイルを作成し、以下のコードを貼り付けてください：
div {
margin-left: 15vw;
margin-right: 15vw;
background-color: lightblue;
padding: 20px;
}
ページを再読み込みすると、次のように表示されます：
ご覧のとおり、フォームがWebページの中央に表示され、青い背景が適用されました。見栄えが良くなりましたね。それでは、このWebページ用のJavaScriptを書き始めましょう。
フォーム保存機能の実装
次のステップは、フォームフィールドに入力された値を取得することです。先ほどのコードでは、各フォームフィールドに次のIDが割り当てられています：
name（名前フィールド）email（メールアドレスフィールド）feedback（メッセージフィールド）
これらのIDを使えば、各フォームフィールドの値を取得できます。form.jsというファイルを作成し、以下のコードを貼り付けてください：
var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
var feedbackField = document.getElementById("feedback");
ここで「var」で宣言しているのは、後でこれらの変数の値を変更するためです。また、ボタンも取得しておきましょう。チュートリアルの後半でクリックイベントを設定するためです：
var saveButton = document.getElementById("saveButton");
var retrieveButton = document.getElementById("retrieveButton");
次に、ボタンが押されたときにこれらの値をlocalStorageに保存する関数を作成します。以下のコードを使用します：
function saveResponses() {
localStorage.setItem("name", nameField.value);
localStorage.setItem("email", emailField.value);
localStorage.setItem("feedback", feedbackField.value);
}
このコードは、saveResponses()関数が呼び出されるまで実行されません。では、どうやって呼び出せばよいのでしょうか？ボタンに関連付ける必要があります。次のコードにより、ボタンがクリックされたときに関数が実行されるようになります：
saveButton.addEventListener("click", saveResponses);
これで、「Save form」ボタンを押すと、入力内容がlocalStorageに保存されるようになりました。
しかし、保存したデータを取り出せなければ意味がありません。「Retrieve form」ボタンがクリックされたときにデータを取得する関数を書きましょう：
function retrieveResponses() {
nameField.value = localStorage.getItem("name");
emailField.value = localStorage.getItem("email");
feedbackField.value = localStorage.getItem("feedback");
}
retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });
素晴らしい！このコードは、localStorageに値が存在する場合、各フォームフィールドの値をその保存された値に設定します。それでは、コードを実行して動作を確認してみましょう：
フォームの見た目は変わりません。まず、フォームに何か値を入力して「Save form」ボタンを押してみてください。これで入力内容が保存されます。
次に、ページを再読み込みして「Retrieve form」を押してみてください。フォームの入力内容が復元されたことがわかるはずです！localStorageの情報はタブを閉じても保持され、ブラウザを閉じても削除されません。成功です！
これらのフォームの入力内容は、再度フォームを保存するか、キャッシュをクリアするまで保存され続けます。
注意：機密性の高い情報を保存するためにこの手法を使わないでください。localStorageのすべてのデータは平文で保存されるため、アクセスできるユーザーなら誰でも読めてしまいます。
まとめ
localStorageメソッドを使うと、JavaScriptでデータをローカルに保存できます。ToDoリスト、ユーザー設定の保存、フォームデータの保存（機密データを除く）といったシンプルなアプリケーションにとっては、データベースを使うよりもはるかに優れた選択肢です。localStorageはセットアップが簡単で、使いやすく、100%バニラなJavaScriptだけで動作します。
これであなたも、プロのJavaScript開発者のようにlocalStorageメソッドを使いこなせるようになりました！
-
JavaScriptのappendChild()メソッド徹底解説！基本的な使い方と実践例
JavaScriptのappendChild()メソッドは、親ノードの末尾に新しい要素を追加するためのメソッドです。特に、<ul>や<ol>などのリストに<li>項目を動的に追加する場面でよく使われます。複数の項目を追加したい場合は、appendChild()を必要な回数だけ呼び出すことになります。 JavaScriptのappendChild()とは？ Webページにはテキストのリスト、画像のリスト、カスタム要素のリストなど、さまざまなリストがあふれています。通常、リストを作成するときはHTMLで直接記述しますが、appendChild()メソッドを使
-
JavaScriptでlocalStorageをクリアする方法
JavaScriptを使ってlocalStorageのデータをすべて削除するには、主に2つの方法があります。方法1：clear()メソッドを使うもっともシンプルなのは、localStorageが提供しているclear()メソッドを呼び出す方法です。これだけで保存されているすべてのキーと値が一括削除されます。localStorage.clear();方法2：ループ処理ですべてのキーを削除するfor...in文でlocalStorage内の各キーを順番に取り出し、個別にdelete演算子で削除する方法もあります。for (key in localStorage) { delete localS