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

how do I store these three variables into local storage?

本文关键字：存储 变量 三个      更新时间：2023-09-26

我正在创建一个疯狂的库，但我无法让我的变量存储在本地存储中。 我有三个变量：名词、名词和名称。 我的最终目标是，一旦存储了变量，用户将能够重新加载页面，并且他们生成的最后一个故事将显示在页面顶部。 



    <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>

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

同样在这里，名词不包含您要搜索的任何字符串（它仅包含您在名词输入中编写的内容）：

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/

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

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

所以 

    <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>
    <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>

相关文章：