如何使用本地存储值填充多个 HTML DOM 元素

Question

我想在单击事件发生时显示最后一个 <div> 元素中的内容，但现在它只显示第 1 个 2 个元素。我有什么地方做得不对吗？

到目前为止，这是我的代码：

JS

    const iname = document.getElementById("name");
    const iemail = document.getElementById("email");
    const iphone = document.getElementById("phone");
    const submit = document.getElementById("submit");
    const storage = document.getElementById("storage");
    
    submit.onclick = function () {
    
        const name = iname.value;
        const email = iemail.value;
        const phoneno = iphone.value;
    
        if (name && email && phoneno) {
            localStorage.setItem(name, "");
            localStorage.setItem(email, "");
            localStorage.setItem(phoneno, "");
            location.reload();
        }
    };
    
    for (let i = 0; i < localStorage.length; i++) {
        const key = localStorage.key(i);
        const value = localStorage.getItem(key);
        storage.innerHTML += `Name : ${key}<br />Email : ${value}`;
    }
    localStorage.clear()

HTML

    <p>Name</p>
    <input id="name" autocomplete="off">
    <p>Email</p>
    <input id="email" autocomplete="off">
    <p>Phone no</p>
    <input id="phone" autocomplete="off">
    <button id="submit">Let's go</button>
    <div id="storage" class="box">
    <h1>Is this correct?</h1></div>

Answer 1

我认为您在 localstorage 中设置的值有误。

存储内容的语法是localstorage.setItem(keyName, keyValue)。您的代码将 keyName 参数设置为您从表单中获取的值，并将 keyValue 参数设置为空字符串；不是你需要的。

进行以下更改，您应该可以开始了（查看评论）：

        submit.onclick = function () {
            const name = iname.value;
            const email = iemail.value;
            const phoneno = iphone.value;
        
            if (name && email && phoneno) {
                // set local storage values
                localStorage.setItem("name", name); // modified
                localStorage.setItem("email", email); // modified
                localStorage.setItem("phoneno", phoneno); // modified
                location.reload();
            }
            console.log(localStorage); // new (maybe unnecessary)
        };
        
        for (let i = 0; i < localStorage.length; i++) {
            const key = localStorage.key(i);
            const value = localStorage.getItem(key);
            storage.innerHTML += `${upFirst(key)}: ${value}<br>`; // modified
        }
        localStorage.clear();

        /**
         * new: making the first letter an upper case (for labels in the output div).
         * See usage in 'for loop' above.
         */
        function upFirst(stringValue) {
            return stringValue.slice(0, 1).toUpperCase() + stringValue.slice(1);
        }

如何使用本地存储值填充多个 HTML DOM 元素

How to populate multiple HTML DOM elements with local storage values

javascript

onclick

local-storage

dom-events

JS

HTML