localStorage 사용법 - Typescipt, 객체, 배열

어플리케이션에서 local로 저장하는 저장소

• 렌더링이 되더라도 저장된 값은 유지된다.
• sessionStorage와 유사
• 렌더링시 값을 유지하기 위해서는 보통 DB에 저장을 해두고 get,post api 요청 처리를 하는 것이 일반적 ⇒ 서버나 DB가 별도로 없거나 , 너무 오버헤드가 크다고 판단 될 시에 쓰면 유용
  
• 브라우저에 몰래 저장하는 공간

;

//데이터 추가
window.localStorage.setItem('데이터명', data);

//데이터 조회
window.localStorage.getItem('데이터명');

//데이터 삭제
window.localStorage.removeItem('데이터명');

• 주의 점: json이든 object 객체든 string 타입 으로만 저장된다.
  • JSON.stringify(data): json to string
  • JSON.parse(data): string to json

예제

북마크 구현

const localStore=localStorage.getItem("BookList");
    const localData:string[]=localStore&&JSON.parse(localStore);

    if(markState===false && !localData.includes(book.id)){
      localData.push(book.id);
      localStorage.setItem("BookList", JSON.stringify(localData));
    } else if(markState===true){
      const filterData=localData.filter((iter)=> iter!==book.id);
      localStorage.setItem("BookList", JSON.stringify(filterData));
    }

• 북마크를 local storage로 활용할 때,

주의점 .

1.string과 String 은 다르다. String 은 객체임,string은 문자열

1. localStorage는 무조건 string 으로 저장된다. string 조회시에도 string 이므로 객체든 배열이든 type지정을 해서 바꿔줘야한다.
   1. JSON.stringify(localData) : 저장시
   2. JSON.parse(localData): 조회시