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

JavaScriptでローカルストレージからデータを取得する方法【setItem・getItemの使い方】

ローカルストレージから要素（データ）を取得するには、まずブラウザがWeb Storage APIに対応しているかどうかを確認する必要があります。その後、localStorage.setItem()メソッドを使ってデータを保存し、localStorage.getItem()メソッドで保存済みのデータを取り出します。

なお、ローカルストレージに保存したデータは、ユーザーまたはスクリプトによって明示的に削除されない限り保持されます。ただし、ブラウザのプライベートモードや各種設定によっては保存が制限される場合があるため、実際に利用する際は事前に対応状況をチェックしておきましょう。

ローカルストレージにデータを設定する構文

localStorage.setItem("キー名", "値");

サンプルコード

以下の例では、最初にif文を使ってストレージの互換性（対応状況）をチェックしています。対応している場合はlocalStorage.setItem()で「product」というキーに「Tutorix」という値を保存し、その後localStorage.getItem()でデータを取得してページ上に表示します。

<html>
<body>
<p id = "storage"></p>
<script>
    if (typeof(Storage) !== "undefined") {
        // データをローカルストレージに保存
        localStorage.setItem("product", "Tutorix");
        // 保存したデータを取得して表示
        document.getElementById("storage").innerHTML = localStorage.getItem("product");
    }
    else {
        document.getElementById("storage").innerHTML = "申し訳ありません。このブラウザはWeb Storageに対応していません...";
    }
</script>
</body>
</html>

実行結果

Tutorix

ポイントまとめ

  • typeof(Storage)：ブラウザがWeb Storageに対応しているかどうかを判定できます。
  • setItem(キー, 値)：キーと値のペアでデータを保存します（値は文字列として格納されます）。
  • getItem(キー)：指定したキーに紐づくデータを取得します。
  • ローカルストレージのデータはブラウザを閉じても保持され続けます。セッションごとに消去されるsessionStorageとはこの点が異なります。
  1. JavaScriptでIDを指定して要素を削除する方法

    JavaScriptでIDを指定して要素を削除するIDを使ってHTML要素を削除するには、remove()メソッドを使用します。このメソッドは、対象のDOM要素をドキュメントから直接取り除くことができる、最もシンプルで直感的な方法です。コード例以下は実際のサンプルコードです。<!DOCTYPE html> <html lang=ja> <head>    <meta charset=UTF-8>    <meta name=viewport content=width=device-width, in

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

    JavaScriptのWeb Storage APIのひとつであるlocalStorageを使うと、ブラウザにデータを永続的に保存できます。ページを再読み込みしても値が消えないため、ユーザー設定や入力内容の一時保存などに便利です。 値を保存するには localStorage.setItem(キー名, 保存する値) を使用し、保存した値を取り出すには localStorage.getItem(キー名) を使用します。 サンプルコード 以下は、テキストボックスに入力された値が変更されるたびに、その値をlocalStorageへ自動的に保存するコード例です。 <!DOCTYPE html>