5. localStorage 에 대하여. [ WEB API ]

로컬스토리지를 사용해보자.

 

로컬스토리지는 

저장가능 용량이 무한하고,

온갖 종류의 데이터를 전부 저장할 수 있으며

도메인 별로 저장한다는 특징을 가지고 있다.

 

또한 로컬스토리지에는 "문자열" 만 저장할 수 있다.

뭘 저장해도 전부 "string" 이 된다.

 

쿠키나 세션스토리지와는 달리 브라우저를 종료해도 사라지지 않는다.

 

로컬스토리지의 사용방법

• setItem() - key, value 추가
• getItem() - value 읽어 오기
• removeItem() - item 삭제
• clear() - 도메인 내의 localStorage 값 삭제
• length - 전체 item 갯수
• key() - index로 key값 찾기

단순하지만, 중요한 한가지는 value 를 저장할때 "원시값" 과 "객체, 배열" 의 차이가 존재한다.

물론 value 가져올때도 적용된다.

 

원시값은 "key" "value" 로 저장하지만,

객체, 배열의 경우에는 "value" 를 넣을때, 반드시 Json Data 로 넣어야한다.

 

실제 예시를 보도록 하자.

 

1. 로컬스토리지에 값 넣기 ( setItem )

 

원시값

window.localStorage.setItem("key", "value");

 

배열, 객체

window.localStorage.setItem("key", JSON.stringify(...));

 

 

2. 로컬스토리에 값 가져오기 ( getItem )

 

원시값

const data = window.localStorage.getItem("key");
console.log(data)

 

배열, 객체

const data = window.localStorage.getItem("key");
console.log(JSON.parse(data))

 

3. 로컬스토리에 값 삭제하기 ( removeItem )

 

window.localStorage.removeItem("key");

 

4.로컬스토리에 값 전부 삭제하기 ( clear )

 

window.localStorage.clear();

 

 

추가적으로

1. 로컬스토리지에 같은 키 값으로 새 값을 넣으면, 새 값으로 대체된다.

2. 로컬스토리지에 아무것도 없는 값을 getItem 으로 가져오면, 초기에는 undefined, 가져오면 null 이 가져와진다.

 

따라서, 조건을 설정할때,

  useEffect(() => {
    const testResult = window.localStorage.getItem("test-result");

    if (testResult === null || testResult === "undefined") {	   // 데이터없으면 방출
      router.replace("/");
    }
  }, []);

이런식의 조건을 설정하는게 옳다.

 

3. Nextjs 의 경우, 초기 렌더시 window나 document 객체가 생성되어 있지 않아 참조할 수 없다.

따라서, useEffect 을 꼭 사용하여 렌더 이후에 참조하게 만들자.