[개발자 도구] local storage, session storage, cookie

lilyoh·2020년 7월 24일
0

1. 로컬, 세션, 쿠키 비교

셋 다 사용자 정보를 저장하는 것과 관련이 있다.

쿠키는 웹사이트에 방문한 사용자 정보를 사용자의 하드디스크에 저장한다. 개인정보 유출 이슈가 있다.

로컬 스토리지와 세션 스토리지는 HTML5 에 새로 추가된 저장소이다. 데이터를 웹에 저장한다. 둘을 묶어서 웹 스토리지라고 하는데 쿠키는 서버로 매번 데이터가 전송되지만 웹 스토리지는 데이터를 웹 클라이언트에 저장하기만 한다. 네트워크 트래픽 비용이 절감된다는 장점이 있다.

💻 데이터 유지 측면에서

쿠키는 만료 기한이 있다.
세션 스토리지는 브라우저 단위로 데이터가 저장된다. 브라우저를 종료하면 데이터는 삭제된다.
로컬 스토리지는 도메인 단위로 데이터가 저장된다. 브라우저를 종료해도 브라우저를 다시 열면 사용자 정보를 불러올 수 있다.

💻 데이터 범위 측면에서

세션 스토리지는 브라우저 단위로 데이터가 저장되는 저장소가 다르다. 즉, 같은 사이트를 열어도 브라우저가 다르면 각각 다른 세션 스토리지에 데이터가 저장된다.
로컬 스토리지는 도메인 단위로 데이터가 저장되기 때문에 도메인만 같으면 데이터는 같은 로컬 스토리지에 저장된다.

2. 어떤 데이터를 어디에 저장하면 좋을까?

  • 쿠키: 빠른 처리가 필요한 임시 데이터 (광고 팝업)
  • 세션: 보안이 중요한 임시 데이터 (은행 로그인)
  • 로컬: 보안이 중요한 영구 데이터 (자동 로그인)

3. 로컬 스토리지에 데이터 저장 및 접근

로컬/세션 스토리지는 키-밸류 형태로 값이 저장된다. 따라서 키값으로 데이터에 접근 가능하다.
저장 : setItem(키, 값)
접근 : getItem(키)

0개의 댓글