JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【JavaScript】localStorageに値を設定・取得する方法をわかりやすく解説

JavaScriptのWeb Storage APIのひとつであるlocalStorageを使うと、ブラウザにデータを永続的に保存できます。ページを再読み込みしても値が消えないため、ユーザー設定や入力内容の一時保存などに便利です。

値を保存するには localStorage.setItem("キー名", 保存する値) を使用し、保存した値を取り出すには localStorage.getItem("キー名") を使用します。

サンプルコード

以下は、テキストボックスに入力された値が変更されるたびに、その値をlocalStorageへ自動的に保存するコード例です。

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
   <input type="text" id="txtName" placeholder="何か値を入力してください..." />
</body>
<script>
   var textBoxNameHTML = document.getElementById('txtName');
   textBoxNameHTML.addEventListener('change', (e) => {
      localStorage.setItem("textBoxValue", e.target.value);
   });
</script> 
</html>

実行方法

上記のプログラムを実行するには、ファイル名を「index.html」として保存します。その後、VS Codeエディタでファイルを右クリックし、「Open with Live Server」を選択してブラウザで開いてください。

実行結果

まず、ブラウザの開発者ツール（コンソール）を開くと、次のような画面が表示されます。

【JavaScript】localStorageに値を設定・取得する方法をわかりやすく解説

続いて、テキストボックスに任意の値（例：「John」など）を入力してみましょう。入力が完了すると、changeイベントが発生し、その値がlocalStorageに自動保存されます。このときの表示は以下の通りです。

【JavaScript】localStorageに値を設定・取得する方法をわかりやすく解説

保存した値を取得する方法

localStorageに保存した値を取得するには、コンソールから以下のように getItem() を呼び出します。

【JavaScript】localStorageに値を設定・取得する方法をわかりやすく解説

Enterキーを押すと、先ほど保存しておいた値がコンソールに表示され、正しくデータが取得できたことが確認できます。

【JavaScript】localStorageに値を設定・取得する方法をわかりやすく解説

まとめ

このように、setItem() で値の保存、getItem() で値の取得というシンプルな操作だけで、localStorageを活用したデータ管理が実現できます。ぜひ実際にコードを動かして挙動を確かめてみてください。

  1. JavaScriptで日付の「日」を設定する方法｜setDate()の使い方を解説

    JavaScriptでは、DateオブジェクトのsetDate()メソッドを使うことで、日付の「日」（1〜31）を設定・変更できます。この記事では、実際のコード例と実行結果をもとに、setDate()の基本的な使い方をわかりやすく解説します。 setDate()メソッドとは setDate()は、Dateオブジェクトの「日」の値だけを変更するためのメソッドです。年や月はそのままに、日にちだけを差し替えたい場合に便利です。引数には1〜31の整数を指定しますが、範囲外の値を渡してもエラーにはならず、自動的に月をまたいだ日付へと調整されます。また、このメソッドは元のDateオブジェクト自体を書き換え

  2. JavaScriptでinnerHTMLを設定する方法をわかりやすく解説

    JavaScriptでHTML要素の内容を動的に書き換えたい場合に便利なのが、innerHTMLプロパティです。innerHTMLを使えば、指定した要素の中にHTML文字列をそのまま挿入・置き換えることができます。本記事では、innerHTMLを設定する正しい構文と、実際に動作するサンプルコードを初心者向けに解説します。 innerHTMLを設定する正しい構文 innerHTMLを設定する際の正しい構文は以下のとおりです。 document.getElementById(yourIdName).innerHTML=yourValue; この構文では、まずgetElementById()メソッド