使用本地存储加载以前的输入值答案

【问题标题】：loading previous input values with local storage使用本地存储加载以前的输入值
【发布时间】：2014-11-28 03:15:46
【问题描述】：

我正在创建一个“Mad Libs”函数，并且我想同时使用本地存储。

如果用户在输入字段中输入了值，我希望将这些值保存在 localStorage 中...然后在重新加载页面时，将这些值加载到页面加载后生成的故事中。

JAVASCRIPT

// input references
var animalRef = document.getElementById("animal");
var nameRef = document.getElementById("name");

// local storage for each input
localStorage["animal"] = animalRef.value;
localStorage["name"] = nameRef.value;

// generate story with user inputs
var generateRef = document.getElementById("generate");
generateRef.addEventListener("click", generateStory);

function generateStory(event){
    var storyRef = document.getElementById("story");

    storyRef.innerHTML = "Once Upon a Time, there was an {{animal}} named {{name}} . . .";

    storyRef.innerHTML = storyRef.innerHTML.replace("{{animal}}", animalRef.value);
    storyRef.innerHTML = storyRef.innerHTML.replace("{{name}}", nameRef.value);
}

HTML

<div id="madLibs">
    <!-- user inputs /-->
    <b>Animal</b><br/>
    <input id="animal" placeholder="animal"/><br/>
    <b>Name</b><br/>
    <input id="name" placeholder="name"/><br/>

    <!-- button /-->
    <p align="center"><input id="generate" type="button" value="generate story"/></p>

    <hr/>

    <!-- output story /-->
    <div id="story"></div>
</div>

【问题讨论】：

标签： javascript jquery input local-storage

【解决方案1】：

试试这样的：

在 pageleave 上保存本地存储

window.onbeforeunload = function(e) {
    localStorage.setItem("animal") = animalRef.value;
    localStorage.setItem("name")   = nameRef.value;
}

在页面加载时检查键

if(localStorage.getItem("animal") != null) {
    storyRef.innerHTML = storyRef.innerHTML.replace("{{animal}}", localStorage.getItem("animal"));
}
if(localStorage.getItem("name") != null) {
    storyRef.innerHTML = storyRef.innerHTML.replace("{{animal}}", localStorage.getItem("name"));
}

【讨论】：