브라우저 localStorage 데이터 저장하기

브라우저에 저장하는 방식으로 쿠키, 세션스토리지, 로컬스토리지 등이 있는데

이번에 불필요한 API 호출을 줄이는 개발을 하면서 서버에 저장하는 것이 아닌 클라이언트측에 저장하는 방법을 알아보았다.

 

 

 

쿠키 vs 세션스토리지 vs 로컬스토리지

세 방법에는 차이점이 있어서 필요에 따라 사용하면 된다.

 

개발자 도구를 통해 확인할 수 있다.

공통점

- key/value 한 세트로 저장 (value에 숫자, 객체로 넣어도 문자열로 저장됨)

 

쿠키 cookie 

- 만료일 지정 가능

- 브라우저를 닫으면 쿠키 값이 삭제됨

 

세션 스토리지 sessionStorage

- 만료일 지정 가능

- 브라우저를 닫으면 세션이 종료되고 sessionStorage 값이 삭제됨

- 브라우저가 열리고 페이지가 다시 보여지거나 복구되어도 유지
- 새 탭이나 새 윈도우에서 페이지를 열게 되면 새로운 세션 생성

 

로컬 스토리지 LocalStorage

- 만료일 지정 불가능

- 브라우저를 닫아도 영구적으로 이용 가능

- 도메인, 브라우저별 저장

 

 

localStorage 예제 (sessionStorage 동일함)

 

로컬스토리지 저장

localStorage.setItem("키", "값");

로컬스토리지 읽기

var val = localStorage.getItem("키");

로컬스토리지 특정 키 삭제 

localStorage.removeItem("키"); 

로컬스토리지 전체 삭제 

localStorage.clear();

 

 

 

 

암호화 필요성

key/value 쌍이 평문으로 로컬에 저장되면 보안이 위험하게된다.

XSS 공격이나 공유 PC등에서 누군가 악의적으로 데이터를 수정 및 삭제 할 수 있기 때문이다.

민감하거나 개인적인 데이터인 경우 이를 방지하기 위해 암호화하여 저장하는것을 권장한다.