Web ページのデータを永続的に保存：JavaScript でローカルストレージを活用

2024-04-26

JavaScript でローカルストレージに設定された項目を確認する方法

このチュートリアルでは、JavaScript を使用してローカルストレージに設定された項目を確認する方法を説明します。

必要なもの

テキストエディタ
Webブラウザ

手順

HTML ファイルを作成し、次のコードを追加します。

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage Check</title>
</head>
<body>
    <button onclick="checkStorage()">ローカルストレージを確認</button>
    <p id="result"></p>

    <script>
        function checkStorage() {
            // キー "example_key" に設定された値を取得します
            let storedValue = localStorage.getItem("example_key");

            // 値が存在するかどうかを確認します
            if (storedValue !== null) {
                // 値が存在する場合、結果を DOM に表示します
                document.getElementById("result").innerHTML = "example_key には " + storedValue + " が設定されています。";
            } else {
                // 値が存在しない場合、結果を DOM に表示します
                document.getElementById("result").innerHTML = "example_key は設定されていません。";
            }
        }
    </script>
</body>
</html>

説明

このコードは次のことを行います。

localStorage.getItem("example_key") を使用して、キー "example_key" に設定された値を取得します。
storedValue !== null を使用して、取得した値が存在するかどうかを確認します。
値が存在する場合、document.getElementById("result").innerHTML を使用して、結果を DOM に表示します。

補足

キーが存在するかどうかを確認するには、localStorage.hasOwnProperty("example_key") を使用することもできます。
すべてのブラウザでローカルストレージがサポートされているわけではありません。サポートされていない場合は、エラーが発生する可能性があります。

HTML ファイル (index.html)

<!DOCTYPE html>
<html>
<head>
    <title>Local Storage Check</title>
</head>
<body>
    <button onclick="checkStorage()">ローカルストレージを確認</button>
    <p id="result"></p>

    <script src="script.js"></script>
</body>
</html>

JavaScript ファイル (script.js)

function checkStorage() {
    // キー "example_key" に設定された値を取得します
    let storedValue = localStorage.getItem("example_key");

    // 値が存在するかどうかを確認します
    if (storedValue !== null) {
        // 値が存在する場合、結果を DOM に表示します
        document.getElementById("result").innerHTML = "example_key には " + storedValue + " が設定されています。";
    } else {
        // 値が存在しない場合、結果を DOM に表示します
        document.getElementById("result").innerHTML = "example_key は設定されていません。";
    }
}

HTML ファイル:

このファイルは、Web ページの構造を定義します。
<button> 要素は、"ローカルストレージを確認" というラベルのボタンを作成します。このボタンがクリックされると、checkStorage 関数が呼び出されます。
<p> 要素は、結果を表示するための段落要素を作成します。

JavaScript ファイル:

このファイルは、JavaScript コードを定義します。
checkStorage 関数は、ローカルストレージに設定された項目を確認します。
値が存在するかどうかを確認するには、storedValue !== null を使用します。

使用方法

上記のコードを 2 つのファイル (index.html と script.js) に保存します。
Web ブラウザで index.html ファイルを開きます。

このコードは、JavaScript でローカルストレージに設定された項目を確認する方法を理解するための基本的な例です。実際のアプリケーションでは、より複雑なロジックを使用する必要がある場合があります。

ローカルストレージに設定された項目を確認するその他の方法

localStorage.getItem() を使用する

これは最も一般的な方法です。キーを指定して、そのキーに設定された値を取得します。

let storedValue = localStorage.getItem("example_key");

この方法は、ローカルストレージに保存されているすべてのキーのリストを取得します。

for (let key of localStorage.key()) {
    console.log(key + ": " + localStorage.getItem(key));
}

ブラウザのデベロッパーツールを使用する

ほとんどの Web ブラウザには、デベロッパーツールが組み込まれています。デベロッパーツールを使用して、ローカルストレージの内容を確認できます。

Chrome:
1. F12 キーを押すか、右クリックしてコンテキストメニューから "詳細設定" > "デベロッパーツール" を選択します。
2. "アプリケーション" タブをクリックします。
Firefox:
1. Ctrl + Shift + K キーを押すか、右クリックしてコンテキストメニューから "ウェブ開発者" > "デバッガ" を選択します。

ライブラリを使用する

ローカルストレージを操作するためのライブラリがいくつかあります。これらのライブラリは、追加機能やユーティリティを提供する場合があります。

注意事項