js toDolist localStorage arrow function

const todo = document.querySelector("#todo")
const todoInput = todo.querySelector("input");
const todos = [];

function save(){
    localStorage.setItem("todos",JSON.stringify(todos));
}
function pressButton(event){
    const list = (event.target.parentElement);
    list.remove();
}
function putlist(value){
    const list = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText="X";
    span.innerText=value;
    list.appendChild(span);
    list.appendChild(button);
    const ul = document.querySelector("#list");
    ul.appendChild(list);
    
    button.addEventListener("click",pressButton);
    
}
function addList(event){
    todos.push(todoInput.value);
    save();
    event.preventDefault();
    const input = todoInput.value;
    todoInput.value="";
    putlist(input);
}
todo.addEventListener("submit",addList);

JSON.stringify는 값을 string 형태로 바꾸어준다.

local storage에는 array 형식으로 저장할 수 없고 string 형태로 저장해야함.

하지만 array 가 저장된 것 처럼 사용하기 위해서

stringify를 활용해 string 형태로 변환한 후 그것을 다시 활용할 수 있는 array 형태로 바꿀 것.

이역할을 해주는 것이 JSON.parse()

 

 

forEach는 array의 각 항목들로 함수를 실행하게 함 그리고

eventListner에서 실행한 함수에 현재 실행되고 있는 정보를 인자로 사용할 수 있는 것처럼

forEach에서도 실행될 함수의 인자로 현재 실행되고 있는 항목에 대한 정보를 제공받을 수 있음.

const store = localStorage.getItem("todos");
function forReview(item){
    console.log(`It's ${item}`);
}
if(store)
{
    const item = JSON.parse(store);
    console.log(item);
    item.forEach(forReview);
}

아래에 이부분을 추가한다면

localStorage에 저장해둔 정보로 store을 초기화하고 저장돼있던 내용이 있어서 store이 NULL이 아니라면

저장된 내용을 배열의 형태로 변환한 뒤 그 내용을 확인하고

그 배열에 담긴 항목 각 하나씩마다 forReview 함수를 실행하며 forReview의 인자에는

배열의 각 항목이 할당되어 각 내용에 맞춰서 콘솔창에 실행된다.

 

위 코드를 대체할 수 있는 방법이 있다. 화살표함수 (=>를 사용하는 것)

const store = localStorage.getItem("todos");
if(store)
{
    const item = JSON.parse(store);
    console.log(item);
    item.forEach((element)=> console.log(`It's ${element}`));
}

forReview 함수를 새로 만드는 것 대신에

if문 내부 마지막 줄에 화살표 함수를 사용했다. 

이렇게 사용한다면 forEach로 item 내부의 각 항목을 훑으면서 각 항목마다 console.log를 할 수행하게 됨.

 

 

맨위에 작성해둔 todolist는 refresh시에 적어둔 list가 화면에서 사라짐.

또한 localstorage에 남아는 있지만 새로 작성을 하면 전에 입력해둔 내용은 사라지고 새 내용이 덮어씌워짐.

 

해결을 위해 페이지 로딩 시 localstorgae에 있는 데이터를 이용해 list를 표시하게 하고

덮어씌워지는 현상을 방지하기 위해 todos 변수를 위 데이터를 이용해 새로 초기화 해주어야 한다.

todos 변수를 새로 초기화 해줄 것이므로 const에서 let 형식으로 바꾸어준다.

그후 맨아래 localstorage에 todolist의 데이터가 있는지 확인하는 if문에서

만약 데이터가 있다면 todos변수에 이미 담겨있는데이터를 이용해 새로 초기화 하도록 한다.

그후 forEach를 이용해 그 데이터를 array 형태로 변환한 것을 이용해서 list 추가하는 함수를 작동시킨다.

 

const todo = document.querySelector("#todo")
const todoInput = todo.querySelector("input");
let todos = [];

function save(){
    localStorage.setItem("todos",JSON.stringify(todos));
}
function pressButton(event){
    const list = (event.target.parentElement);
    list.remove();
}
function putlist(value){
    const list = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText="X";
    span.innerText=value;
    list.appendChild(span);
    list.appendChild(button);
    const ul = document.querySelector("#list");
    ul.appendChild(list);
    
    button.addEventListener("click",pressButton);
    
}
function addList(event){
    event.preventDefault();
    const push = todoInput.value
    const input = todoInput.value;
    todos.push(push);
    todoInput.value="";
    putlist(input);
    save();
}
todo.addEventListener("submit",addList);

const store = localStorage.getItem("todos");
if(store)
{
    const item = JSON.parse(store);
    console.log(item);
    todos = item;
    console.log(todos);
    item.forEach(putlist);
}

※submit 해서 리스트를 추가할 때 마다 localstorge 내용에 변화가 있고

리스트는 추가되지만 콘솔창에 item과 todos 의 내용이 출력되지 않는 것으로

이러한 형태의 if문은 페이지가 로딩 될때만 한번 실행 된다고 확인했음.