javascript - 使用 localStorage 简化代码

Question

我想知道是否可以使用循环来简化所有这些，而不是对整个结构进行硬编码。对于我的 Javascript 的第二部分，我尝试使用 for 循环将用户输入存储到 localStorage 中，但出现错误

CreateEvent.js:72 Uncaught TypeError: name.push is not a function at createReplace (CreateEvent.js:72) at HTMLButtonElement.onclick (CreateEvent.html:130)

HTML:

<span class="border1">
    <input class="forms" type="text" id="title" placeholder="Enter Title!">
        <p id="title1"></p>
    <input class="forms" type="text" id="brief" placeholder="Enter brief description!">
        <p id="brief1"></p>
</span>

<div class="Hovertrees">
    <p>Hover over me!</p>
    <span class="Hovertrees2">
    <input class="hover" type="text" id="hover" placeholder="Enter some fun facts!">
        <p id="hover1"></p>
    </span>
</div>

<div id="what">
    <input class="forms" type="text" id="whattitle" placeholder="What is this event?">
        <h2 id="whattitle1"></h2>
    <input class="forms" type="text" id="whatdesc" placeholder="Enter brief description!">
        <p id="whatdesc1"></p>
</div>

<div id="why">
    <input class="forms" type="text" id="whytitle" placeholder="Why is this event important?">
        <h2 id="whytitle1"></h2>
    <input class="forms" type="text" id="whydesc" placeholder="Description of this event">
        <p id="whydesc1"></p>
</div>

<div id="fun">
    <input class="forms" type="text" id="funtitle" placeholder="Anything interesting you can add!">
        <h3 id="funtitle1"></h3>
    <input class="forms" type="text" id="fundesc" placeholder="Description of the interesting info!">
        <p id="fundesc1"></p>
</div>

Javascript:

var title;
var brief;
var hover;
var whatTitle;
var whatDesc;
var whyTitle;
var whyDesc;
var funTitle;
var funDesc;

function createReplace() {
    title = document.getElementById('title').value;
    document.getElementById('title1').innerHTML = title;
    document.getElementById('title').className = 'hidden';

    document.getElementById('news').innerHTML = title;

    brief = document.getElementById('brief').value;
    document.getElementById('brief1').innerHTML = brief;
    document.getElementById('brief').className = 'hidden';

    hover = document.getElementById('hover').value;
    document.getElementById('hover1').innerHTML = hover;
    document.getElementById('hover').className = 'hidden';

    whatTitle = document.getElementById('whattitle').value;
    document.getElementById('whattitle1').innerHTML = whatTitle;
    document.getElementById('whattitle').className = 'hidden';

    whatDesc = document.getElementById('whatdesc').value;
    document.getElementById('whatdesc1').innerHTML = whatDesc;
    document.getElementById('whatdesc').className = 'hidden';

    whyTitle = document.getElementById('whytitle').value;
    document.getElementById('whytitle1').innerHTML = whyTitle;
    document.getElementById('whytitle').className = 'hidden';

    whyDesc = document.getElementById('whydesc').value;
    document.getElementById('whydesc1').innerHTML = whyDesc;
    document.getElementById('whydesc').className = 'hidden';

    funTitle = document.getElementById('funtitle').value;
    document.getElementById('funtitle1').innerHTML = funTitle;
    document.getElementById('funtitle').className = 'hidden';

    funDesc = document.getElementById('fundesc').value;
    document.getElementById('fundesc1').innerHTML = funDesc;
    document.getElementById('fundesc').className = 'hidden';

    document.getElementById("create").className = "hidden";

    var varNames = [
        'titles',
        'brief',
        'hover',
        'whatTitle',
        'whatDesc',
        'whyTitle',
        'funtitle',
        'fundesc'
    ]
    for (var name in varNames) {
        var value = window[name]
        var obj = {name : value};
            if(localStorage.getItem(name) != null) {
                var tmp = JSON.parse(localStorage.getItem(name));
                for(var i = 0;i<tmp.length;i++) {
                    name.push(tmp[i]);
                }

            }
            name.push(obj);
            localStorage.setItem(name, JSON.stringify(value));
        }
    }

Answer 1

对于第一部分，简化是不可能的，因为每个元素都有不同的属性。

---

对于第二部分，你会得到错误，因为 push 是数组对象的方法。但是 name 是在 for 循环中声明的字符串对象

for (var name in varNames) {
        var value = window[name]
        var obj = {name : value};
            if(localStorage.getItem(name) != null) {
                var tmp = JSON.parse(localStorage.getItem(name));
                for(var i = 0;i<tmp.length;i++) {
                    name.push(tmp[i]);
                }

            }
            name.push(obj);
            localStorage.setItem(name, JSON.stringify(value));
        }
    }