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

Question

当点击事件发生时，我想在最后一个<div>元素中显示内容，但现在它只显示第一个 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>

标签： javascriptonclicklocal-storagedom-events

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);
        }