Question

我正在创建一个疯狂的lib，我无法将我的变量存储在本地存储中。我有三个变量：noun，nounTwo和name。我的最终目标是，一旦存储了变量，用户就可以重新加载页面，他们生成的最后一个故事将显示在页面顶部。



    <script>

    function lib() {
    var storyDiv = document.getElementById("story");
    var nounTwo = document.getElementById("nounTwo").value;
    var noun = document.getElementById("noun").value;
    var name = document.getElementById("name").value;
    storyDiv.innerHTML = "One day a " + noun + " attacked a " + nounTwo + ", and was defeated by " + name + "!";
    noun.replace('noun', noun.value);
    noun.replace('nounTwo', nounTwo.value);
    noun.replace('name', name.value);
    }

    var libBtn = document.getElementById('generate');
    libBtn.addEventListener('click', lib);

    localStorage.setItem('noun', noun.value);

    console.log(localStorage);

    </script>
    <html>
    <head>
        <title>Mad Lib Lab</title>
    </head>
    <body>
    <h1>Mad Libs</h1>

    <div id="result"></div>

    <div id="story">
      
    One day a
      
    <input type="text" id="noun" placeholder="noun">
      
    attacked a
      
    <input type="text" id="nounTwo" placeholder="noun">
      
    ,but was defeated by a
      
    <input type="text" id="name" placeholder="Famous Person">!

    <button id="generate">generate</button>
    </div>

    </body>
    </html>

Answer 1

当<input>中没有任何内容时，您立即调用setItem。 addEventListener是非阻塞的，并且无法通过el.value访问占位符。

例如，将其放在函数saveFunc中，然后从lib调用它，或者添加第二个按钮save并将saveFunc作为监听器。

所以

＆＃13;

    <script>

    function save() {
        var mapping = {'noun': '#noun', 'name': '#name', 'nounTwo': '#nounTwo'};
        for (key in mapping) { // ↓ I prefer querySelector, that's why ids with # ↑
            localStorage.setItem(key, document.querySelector(mapping[key]).value)
        }

        console.log(localStorage);
    }

    function lib() {
    var storyDiv = document.getElementById("story");
    var nounTwo = document.getElementById("nounTwo").value;
    var noun = document.getElementById("noun").value;
    var name = document.getElementById("name").value;
    storyDiv.innerHTML = "One day a " + noun + " attacked a " + nounTwo + ", and was defeated by " + name + "!";
    noun.replace('noun', noun.value);
    noun.replace('nounTwo', nounTwo.value);
    noun.replace('name', name.value);
    save(); // ← here it goes.
    }

    var libBtn = document.getElementById('generate');
    libBtn.addEventListener('click', lib);


    </script>

＆＃13;

    <html>
    <head>
        <title>Mad Lib Lab</title>
    </head>
    <body>
    <h1>Mad Libs</h1>

    <div id="result"></div>

    <div id="story">
      
    One day a
      
    <input type="text" id="noun" placeholder="noun">
      
    attacked a
      
    <input type="text" id="nounTwo" placeholder="noun">
      
    ,but was defeated by a
      
    <input type="text" id="name" placeholder="Famous Person">!

    <button id="generate">generate</button>
    </div>

    </body>
    </html>

＆＃13;

Answer 2

如果您只需要显示最后一个故事，则无需存储所有三个变量。

此外，名词不包含您要搜索的字符串（它只包含您在名词输入中写的内容）：

noun.replace('noun', noun.value);
noun.replace('nounTwo', nounTwo.value);
noun.replace('name', name.value);

这应该可以解决问题：

function lib() {
    var storyDiv = document.getElementById("story");
    var nounTwo = document.getElementById("nounTwo").value;
    var noun = document.getElementById("noun").value;
    var name = document.getElementById("name").value;
    var story = "One day a " + noun + " attacked a " + nounTwo + ", and was defeated by " + name + "!";
    storyDiv.innerHTML = story;
    localStorage.setItem('laststory', story);
}

var libBtn = document.getElementById('generate');
libBtn.addEventListener('click', lib);

if(localStorage.getItem('laststory')) {
    document.getElementById('result').innerHTML = localStorage.getItem('laststory');
}

http://jsfiddle.net/33z2m6b1/2/

如何将这三个变量存储到本地存储中？

2 个答案: