Next js (넥스트 js) - SessionStorage , localStorage (자체 데이터)

내 웹사이트는 로그인이 필요한데,

새로고침을 하면

로그인이 풀려버리는 심각한 이슈가 지속되었다.

​

다행히도,

자체적으로만 사용하는 사이트라서

​

우선순위가 뒤로 미뤄졌지만

​

너부 불편해서 개선하기로 했다.

​

---

 

기존에는 값을

1. useState
2. recoil
3. useContext
4. reducer

​

등 위의 4가지 방식으로 값 들을 저장 했는데,

​

새로고침하는 순간,

​

저 데이터들은 모두 초기화가 되는 것이 아닌가 ??

​

따라서, 나는

새로고침을 해도 갱신이 안되는 데이터 관리가 필요했다.

​

그렇게 알게 된

SessionStorage, LocalStorage

(새로고침을 해도 데이터가 유지 됨.)

​

​

SessionStorage 와 LocalStorage는

구분을 해야 한다.

​

​

1) SessionStorage

• 새로고침시에도 데이터가 유지 된다.
• 브라우저를 닫거나, 탭을 닫으면 사라진다.

​

 

​

2) LocalStorage

• 브라우저를 닫거나, 탭을 닫아도 사라지지 않는다.

​

​

나는 브라우저를 닫으면,

로그인이 풀리길 원하며,

​

새로고침시에만 데이터가 유지되기를 원한다.

​

따라서, SessionStorage를 선택.

​

​

사용법

​

매우 간단하다.

sessionStorage와 LocalStorage 둘 다 브라우저에서 제공하는 웹 스토리지 API 일종이라서, 따로 라이브러리 설치 같은 것도 필요없다.

​

​

- sessionStorage

 

//* 데이터 할당
sessionStorage.setItem("Token", token);

//* 데이터 가져오기
sessionStorage.getItem("Token")

//* 데이터 삭제
sessionStorage.removeItem("Token");


//* 모든 데이터 삭제
sessionStorage.clear();

 

 

- localStorage

 

//* 데이터 할당
window.localStorage.setItem("Token", token);

//* 데이터 가져오기
window.localStorage.getItem("Token")

//* 데이터 삭제
window.localStorage.removeItem("Token");


//* 모든 데이터 삭제
window.localStorage.clear();