객체 localStorage 저장

지난번에 배웠던 localStorage를 사용해서
객체를 저장하는 방법을 알아보자.

localStorage에는 문자열만 저장이 가능함

이런 객체를 저장하기 위해서는 문자열로 변환을 해주어야함.
이때 사용하는 방법은 String 문자열이 아닌 JSON 타입을 사용해야함

console.log(String(saveItems))
console.log(JSON.stringify(saveItems))

비교를 해보면

String 으로변환을 시도하면 [object Object] 이렇게 이상하게 출력이됨.

console.log(typeof JSON.stringify(saveItems))

제대로 문자열 타입이 맞는지 확인

string 타입으로 출력되는걸 확인 가능함

이제 변환된 문자열을 localStorage를 통해서 저장하자.

localStorage.setItem('saved-items',JSON.stringify(saveItems))

정상적으로 저장되는 모습.

localStorage 데이터 꺼내 쓰기

localStorage.getItem('saved-items');

으로 가져오면 되는데 가져오면 해당 내용은 역시 문자열 상태
해서 이번에는 JSON 문자열을 다시 배열이나 객체형태로 되돌려보자.

JSON.parse(localStorage.getItem('saved-items'));

정상적으로 원상복구 된 모습.
이제 코드에서 해당 객체형태의 값을 사용해서 제대로 출력되도록 설정

const savedTodolist = JSON.parse(localStorage.getItem('saved-items'));

if (savedTodolist) {
    for(let i = 0 ; i < savedTodolist.length; i++ ){
        newTag(savedTodolist[i])
    }
}

불러온 스토리지의 데이터 만큼 반복되도록 설정하고.
해당 데이터를 하나씩 태그 생성으로 보냄.

태그 생성 내부에서는 기존

newSpan.textContent = todoInput.value

input 박스에서 받아온 value를 직접 넣어 줬다면

let todoContents = todoInput.value
if(storageData){
  todoContents = storageData.contents
}
newSpan.textContent = todoContents;

태그 생성 최상단에서 스토리지에서 데이터를 받아왔나 확인 후 받아왔으면 해당 값으로 태그를 생성하도록 수정
하지만 이상태로 실행해 보면

태그생성하는 함수인 newTag 함수를 실행 할 수없다고 뜸.