이 글을 쓰게 된 이유
- 토이 프로젝트를 해오면서 사용자에게 할당 되는 필요한 정보를 전역 상태로만 관리할 수 있는게 아닌 브라우저에 저장할 수 있다는 걸 알게 된 후 공부하게 되었다.
로컬 스토리지(Local Storage)
Window에 속해 있는 저장소로 HTML5부터 추가되었다.
사용자가 데이터를 지우지 않는 이상 영구적으로 Window 저장소에 남는다.
로컬 스토리지 사용법
localStorage.setItem('key', 'value'); // 'key'와 'value'로 객체 데이터를 생성한다.
localStorage.getItem('key'); // 'key' 값을 입력하면 'key'에 할당된 'value' 값을 가져온다.
localStorage.removeItem('key'); // 'key' 값을 입력하면 해당 'key'값과 할당된 'value' 값을 삭제한다.
localStorage.clear(); // window.localStorage에 저장되어 있는 모든 'key'와 'value' 값을 삭제한다.세션 스토리지(Session Stroage)
마찬가지로 HTML5부터 추가된 저장소로 Window에 속해있다.
하지만 로컬 스토리지와 다르게 브라우저가 종료되면 자동으로 Window 저장소에 있던 데이터들을 삭제시킨다.
세션 스토리지 사용법
sessionStorge.setItem('key', 'value'); // 'key'와 'value'로 객체 데이터를 생성한다.
sessionStorge.getItem('key'); // 'key' 값을 입력하면 'key'에 할당된 'value' 값을 가져온다.
sessionStorge.removeItem('key'); // 'key' 값을 입력하면 해당 'key'값과 할당된 'value' 값을 삭제한다.
sessionStorge.clear(); // window.localStorage에 저장되어 있는 모든 'key'와 'value' 값을 삭제한다.언제 쓰는가?
로컬 스토리지
- 내가 알고 있는 예시로 자동 로그인에 해당되는 지속적인 데이터 보관이 필요할 때이다. 다만 자동 로그인을 쓰게 된다면 JWT를 사용하여 꼭 refresh token도 사용하도록 하자.
세션 스토리지
- 데이터를 임시적으로 저장할 때에 보통 쓰인다. 비로그인 장바구니, 일회성 로그인, 임시 저장 등에 활용하여 사용하도록 하자.
웹 스토리지의 단점
- HTML5를 지원하는 브라우저에서만 사용이 가능하다. 요즘은 대부분 지원되니 크게 단점이라 할 것이 없다.
- XSS로부터 위험 - 세션 스토리지는 임시로 저장되는 데이터지만 반대로 로컬 스토리지는 사용자가 삭제하기 전까지 남아있는 데이터기 때문에 악의적으로 그 값을 사용하려는 사용자가 JS 코드로 접근해 뽑아낼 수 있다.
하잇