로컬 세션의 동적 배열

Question

로컬 세션 변수를 사용하는 논리에 문제가 있습니다. 따라서 HTML5를 사용하면 이러한 로컬 저장소 변수를 설정하고 가져올 수 있습니다.

내가이 글을 읽은 : adding objects to array in localStorage 및 SetItem을 사용하여, 당신은 당신이 동적 배열하여 설정 한 변수를 다시 쓸 것으로 이해, 당신은 새 값을 밀어 전에 먼저 변수를 얻을 필요가있을 것이다 .

내가 가지고있는 문제는 가능하다면 예를 들어, 사용자 입력을 받아서 배열에 추가하는 index.html 페이지를 갖고 싶다는 것입니다. 끈기 있어야합니다. 사용자가 동일한 페이지를 다시로드하면 이전 입력은 여전히 ​​동일한 배열에있게됩니다. 이전에 언급 한 게시물에서 읽은 내용에서 SetItem을 사용하면 변수를 다시 작성합니다. 그러나 setItem을 사용하지 않으면 배열을 로컬 저장소 변수로 지정하는 방법은 무엇입니까? 내가 혼란스러워서 혼란스러워하면 죄송합니다. 미리 감사드립니다.

Answer 1

귀하의 모든 가정이 정확합니다. setItem을 사용하여 localStorage에만 쓸 수 있으며 setItem이 호출되면 거기에 존재하는 값을 덮어 씁니다. 따라서 localStorage의 배열에 항목을 추가하는 유일한 방법은 localStorage에서 배열을 가져 와서 조작 한 다음 새 항목과 함께 다시 배치하는 것입니다.

// Check if we already have an array in local storage. 
var x = localStorage.getItem("myArray"); 
// If not, create the array. 
if (x === null) x = []; 
// If so, decode the array. 
else x = JSON.parse(x); 
// Add our new item. 
x.push("value 1"); 
// Encode the array. 
x = JSON.stringify(x); 
// Add back to LocalStorage. 
localStorage.setItem("myArray", x); 

Answer 2

이는 다음과 같은 방법에 의해 수행 할 수 : 당신을 따라 갈 수 없어

var myInput = document.getElementById("myInput").value; // user data 
var myList = JSON.parse(localStorage.getItem("myList")); // retrieve the list from LS 
if(!Array.isArray(myList)) { // if LS list is not ok, instantiate new array 
    myList = []; 
} 
myList.push(myInput); // append user data to the list 
localStorage.setItem("myList", JSON.stringify(myList)); // save the list back to LS