JavaScript localStorage：ガイド
Webアプリケーションは、非常に複雑になり、非常に速くなる可能性があります。開発者としての私の時代に学んだことの1つは、機会があれば、昔ながらのJavaScriptでできることがたくさんあるということです。
localStorage APIは強力な組み込み関数であり、サーバーを必要としない単純なアプリケーションにデータベースを使用する必要がありません。このAPIを使用して、アプリケーションからアクセスできるデータをローカルに保存できます。
このガイドでは、JavaScriptでlocalStorageメソッドを使用する方法について説明します。 localStorageを使用して、フォームのコンテンツを後でWebページに保存する方法の例を実行します。始めましょう！
localStorageとは何ですか？
localStorageは、WebストレージAPIの一部です。このAPIを使用すると、アプリケーションがアクセスできるユーザーのブラウザ内にデータを保存できます。
ストレージAPIは、ユーザーのセッションに関するすべてのデータをデータベースに送信する必要がないことを意味するため、便利です。ユーザーがサイトでダークモードを有効にしている場合は、クライアント側でそれを追跡できます。ユーザーが後で使用するためにフォームを保存する場合、半分完成したフォームをデータベースに保存する必要はありません。
Webストレージには2つのタイプがあります。 localStorageは、ユーザーがブラウザタブを閉じた後も、ユーザーのブラウザウィンドウに表示されるデータです。 Cookieとは異なり、localStorageデータは有効期限のないデータです。 sessionStorageは、セッションが期限切れになるまで、つまりブラウザが閉じられるまで続くデータです。
この投稿では、localStorageオブジェクトに焦点を当てます。ただし、どちらも同じ構文を使用しているため、これをsessionStorageの代わりに使用できます。
localStorageの使用方法
例を掘り下げる前に、localStorageによって提供されるメソッドを見ていきましょう。
参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。
平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。
localStorageエントリを作成するには、setItem()というメソッドを使用できます。 ：
localStorage.setItem("name", "Linda Carlton");
console.log(localStorage); コードは次のようになります：
{ name: "Linda Carlton", length: 1 }
localStorageは、アイテムをキーと値のペアで格納します。この例では、「name」というアイテムを作成しました。このアイテムの値は「LindaCarlton」です。
console.log()を使用しました localStorageの内容を出力して、値が追加されたことを確認するステートメント。
これと同じコードを使用して、localStorageに格納されている値を更新できます。
localStorageから特定の値を取得するには、getItem()を使用できます。 方法：
localStorage.getItem("name"); コードは次のようになります：
Linda Carlton.
localStorageからデータを削除するために使用できる方法は2つあります。
- removeItem（）：localStorageから1つのアイテムを削除します
- clear（）：localStorage（）内のすべてのアイテムを削除します
「名前」アイテムをローカルストレージから削除する場合は、次のコードを使用できます。
localStorage.removeItem(name); console.log(localStorage);
コードは次のようになります：
{ length: 0 }
localStorageをクリアしても、保存されているアイテムが1つあることに注意してください。それは長さです。これにより、localStorageに保存されているアイテムの数がわかります。 「name」エントリを削除したので、localStorageには何も保存されていません。
localStorageは文字列のみを保存できることに注意することも重要です。
localStorageを使用したフォーム保存機能の構築
私たちは皆、長いフォームに記入するように求めるいくつかのWebサイトにアクセスしています。何かが本当に重要でない限り、後でそのフォームに戻れるようにしたいと思います。そのため、非常に多くのサイトに「フォームの保存」機能があり、後でフォームの詳細を追跡できます。
これらのいくつかはおそらくデータベース内のデータを追跡しますが、localStorageメソッドを使用して軽量バージョンを作成できます。
フロントエンドを作成する
地元の喫茶店TheLittleTeaHouseの顧客フィードバックフォームを作成します。最初のステップは、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ページの中央に表示され、背景は青色になっています。見栄えがいいです！これで、このWebページのJavaScriptの作成を開始する準備が整いました。
フォーム保存機能を作成する
次のステップは、フォームフィールドに保存されている値を収集することです。上から、フォームフィールドには次のIDがあります。
- 名前（名前フィールド）
- メール（メールフィールド）
- フィードバック（メッセージフィールド）
これらの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);
「フォームを保存」ボタンを押すと、応答がlocalStorageに保存されます。
ただし、このデータを取得できない場合は、このデータを保存しても意味がありません。 [フォームを取得]ボタンがクリックされたときにこのデータを取得する関数を記述します：
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に格納されている値に設定します。それでは、コードを実行して何が起こるか見てみましょう：
私たちのフォームは同じように見えます。フォームにいくつかの値を挿入して、[フォームを保存]ボタンを押してみてください。これにより、フォームへの回答が保存されます。
次に、ページを更新して「フォームの取得」を押します。フォームの回答が保存されたことに気付くでしょう。 tabを閉じても、localStorageの情報は保持されます。ブラウザを閉じても削除されません。やりました！
これらのフォームの応答は、フォームを再度保存するか、キャッシュをクリアするまで保存されます。
注：機密情報を保存するためにこの手法を使用しないでください。 localStorageのすべてのデータはプレーンテキストで保存されます。つまり、データを読むすべてのユーザーがアクセスできます。
結論
localStorageメソッドを使用すると、JavaScriptでデータをローカルに保存できます。やることリスト、ユーザー設定の保存、ユーザーのフォームデータ（機密データを含まない）の保存などの単純なアプリケーションの場合、データベースを使用するよりもはるかに優れています。 localStorageは、セットアップと使用が簡単で、100％バニラJavaScriptです。
これで、JavaScriptのエキスパート開発者のようにlocalStorageメソッドを使い始める準備ができました！
-
appendChild JavaScript：ガイド
JavaScriptのappendChild（）メソッドは、ノードの最後にアイテムを追加します。 appendChild（）は、アイテムをリストに追加するためによく使用されます。ノードに複数のアイテムを追加する場合は、複数のappendChild（）ステートメントを使用する必要があります。 JavaScriptのappendChildの使用方法 一部のリストにはテキストが含まれています。他のリストには画像が含まれています。他のリストには、カスタムWeb要素が含まれています。リストにあるものが何であれ、確かなことが1つあります。それは、Webページがリストでいっぱいであることです。 リスト
-
JavaScriptでlocalStorageをクリアしますか？
JavaScriptを介してlocalStorageを実際にクリアする方法は2つあります。 Way1-clear（）メソッドの使用 localStorage.clear(); Way2-localStorageを反復処理し、すべてのキーを削除します for(key in localStorage){ delete localStorage[key]; } どちらの方法でも機能します。 例 <html> <body> <p id = "storage"></p> <script> if (typeof(