로컬 저장소에 이전 입력 값로드

Question

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

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