【javascript】ブラウザのローカルストレージにデータを保存する方法

ローカル側にデータを保存する方法は、クッキー、セッションストレージ、ローカルストレージがあるが、今回はローカルストレージの保存方法について。

<!DOCTYPE html>
<html>
<head>
    <title>フォーム入力の保存</title>
</head>
<body>
    <form id="myForm">
        <label for="name">名前:</label>
        <input type="text" id="name" name="name"><br><br>

        <label for="email">Eメール:</label>
        <input type="email" id="email" name="email"><br><br>

        <input type="button" value="保存" onclick="saveFormData()">
    </form>

    <script>
        // フォーム入力値を保存するための関数
        function saveFormData() {
            // 入力値を取得
            var nameInput = document.getElementById("name");
            var emailInput = document.getElementById("email");

            // ブラウザのローカルストレージに値を保存
            localStorage.setItem("name", nameInput.value);
            localStorage.setItem("email", emailInput.value);

            alert("フォーム入力が保存されました");
        }

        // ページ読み込み時に保存された値をフォームに設定
        window.onload = function() {
            var nameInput = document.getElementById("name");
            var emailInput = document.getElementById("email");

            var savedName = localStorage.getItem("name");
            var savedEmail = localStorage.getItem("email");

            if (savedName) {
                nameInput.value = savedName;
            }

            if (savedEmail) {
                emailInput.value = savedEmail;
            }
        };
    </script>
</body>
</html>

ローカルストレージに値を保存したい場合は、localStrage.setItemメソッドを利用する。
引数はキー、値を設定する。同じキーに別の値を設定すると値が上書きされる。

localStorage.setItem("name", nameInput.value);

逆にローカルストレージから値を取得する場合は、localStrage.getItemメソッドを利用する。引数には保存した時のキーを利用する

var savedName = localStorage.getItem("name");