JavaScript의 localStorage.getItem()과 setItem()

const toDoForm = document.querySelector(".js-toDoForm"),
    toDoInput = toDoForm.querySelector("input"),
    toDoList = document.querySelector(".js-toDoList");


const TODOS_LS = 'toDos';
const toDos = [];

function saveToDos()
{
    console.log(11111);
    // 입력된 todo를 String 형태로 TODOS_LS에 담아두기
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos));
}

function paintToDo(text)
{
    //console.log(text);
    const li = document.createElement("li");
    const delBtn = document.createElement("button");
    const span = document.createElement("span");
    const newId = toDos.length + 1;

    delBtn.innerHTML = "❌";
    span.innerText = text;
    li.appendChild(delBtn);
    li.appendChild(span);
    li.id = newId;

    toDoList.appendChild(li);   // 입력된 정보 뿌려주기

    const toDoObj = 
    {
        text: text,
        id: newId
    };
    toDos.push(toDoObj);
    saveToDos();
}
    
function handleSubmit(event)
{
    event.preventDefault();
    const currentValue = toDoInput.value;
    paintToDo(currentValue);
    toDoInput.value = "";
}

function loadToDos()    // 페이지가 로드될때 기존 등록되어 있는 todo들을 조회해서 뿌려주기
{
    const loadedToDos = localStorage.getItem(TODOS_LS);
    //console.log(loadedToDos);     이건 String
    if(loadedToDos !== null)    // 기존에 등록된 todo가 있으면
    {
        const parsedToDos = JSON.parse(loadedToDos);    // JSON 형태로 만들어서
        parsedToDos.forEach(function(toDo){             // 각 항목들마다
            //console.log(toDo.text);
            paintToDo(toDo.text);                       // text값을 뿌려주기
        });
    }
}

function init()
{
    loadToDos();
    toDoForm.addEventListener("submit", handleSubmit)
}

init();

localStorage란, 데이터를 사용자 로컬에 보존하는 방식이다.

쿠키와는 다르게 유효 기간이 존재하지 않는다.

 

위의 코드는 기존에 입력된 toDos내용을, 로컬에 저장시켜 두었다가 화면에 뿌려주고

새로 등록한 todo는 리스트에 추가해주는 코드이다.

 

1)

첫 번째로 이해가 안갔던 부분은, 6번줄에 const TODOS_LS = 'toDos'; 이 상수 선언하는 부분이다.

51번줄에서 localStorage.getItem(TODOS_LS)를 통해서 기존에 등록된 todo리스트들을 다 받아오고 있는데,

그냥 상수인 TODOS_LS를 어떻게 저장된 todo객체로 알아서 인식해서 가져오는지 이해가 안갔다.

 

확인해보니,

그냥 상수인 TODOS_LS를 가져오는것이 아니라, 13번줄에서 setItem()으로 넣어줬기 때문에 가능한 것이였다.

setItem()의 첫번째 인자에 TODOS_LS라는 이름에 실제 등록된 todo데이터가 담겨있는 toDos배열을 String타입으로 담아두었다가, 51번줄에서 TODOS_LS라는 키값으로 꺼내온것이다.

 

따라서 6번줄은, 

1. "toDos"를 매번 치지 않고 안전하게 상수 TODOS_LS로 관리하기 위해서

2. ""안에 들어있는 이름으로 todo리스트들을 담아내기

 

이런 역할을 가지고 있다.

// const TODOS_LS = 'aaaaa'; 로 작성하면 todos 객체명은 aaaaa로 등록된다.

 

2)

두 번째로 이해가 안갔던 부분은, 58번줄에서 기존 리스트들을 뿌려주는 paintToDo(toDo.text); 함수를 호출할때

paintToDo()함수 안에는 saveToDos(); 를 부르고 있는데 중복으로 값이 저장되지 않는 부분이다.

 

확인해보니,

setItem() 함수는 이미 동일한 이름의 값이 있을 때는 중복저장 되는 것이 아니라 업데이트를 한다고 한다.

따라서 내부적으로는 업데이트가 된 것이지만 기존에 있던 toDo.text의 값으로 매개변수를 넘겨주고 있기 때문에,

변경사항이 없어 보이는 것이였다.