• Blog
  • Projects
  • Resume
profile_image

[JavaScript] 로컬 스토리지, 세션 스토리지 그리고 쿠키

JavaScript

2021.07.12

로컬 스토리지와 세션 스토리지?


  • 로컬 스토리지(localStorage) 와 세션 스토리지(sessionStorage) 는 HTML5에서 추가된 저장소.
  • 간단한 키와 값을 저장할 수 있음. key-value 스토리지의 형태.
  • 두 스토리지 모두 window 객체에 들어있음!

로컬 스토리지와 세션 스토리지의 차이점

  • 로컬스토리지는 사용자가 지우지 않는한 계속 브라우저에 남아있음
  • 세션스토리지는 윈도우나 브라우저 탬을 닫을 경우 제거됨.

데이터의 영구성의 차이가 있음

로컬 스토리지와 세션 스토리지의 사용 예

  • 지속적으로 필요한 데이터(자동 로그인 등)는 로컬 스토리지 에 저장
  • 사용 예) 자동 로그인
  • 잠깐 필요한 정보는 세션 스토리지에 저장
  • 비밀번호같은 중요한 정보는 절대 저장하면 안됌. (유출될 위험이 있음)
  • 사용 예) 일회성 로그인
  • 두 스토리지 모두 보안에 민감하지 않은 정보들만 넣어두기!!!

쿠키


  • 로컬 스토리지랑 세션 스토리지가 나오기 이전에 브라우저 저장소 역할을 함
  • 쿠키는 만료 기한이 있는 key-value 저장소

쿠키는 4kb 용량 제한이 있고, 매 서버 요청마다 서버로 쿠키가 같이 전송

  • 왜 서버에 쿠키가 전송될까?

  • HTTP 요청은 상태를 가지고 있지 않음
    브라우저에서 서버로 나에 대한 정보를 가져오라는 GET /me 라는 요청을 보낸다면
    서버는 요청 자체만으로는 그 요청이 누구에게서 오는지 알 수 없음. (알 수 없기에 응답을 보낼 수 없음..)

  • 이 때 쿠키를 나에 대한 정보를 담아 서버로 보낸다면?
    서버는 쿠키를 읽어서 내가 누군지 파악함

쿠키는 처음부터 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기에 서버로 계속 전송되는 것.

  • 만약 4kb 용량 제한을 거의 다 채운 쿠키가 있다면, 요청을 할 때마다 기본 4kb의 데이터를 사용.
    이 4kb 중에는 서버에 필요하지 않은 데이터들도 있을 것. (데이터 낭비가 발생)

이러한 데이터 낭비가 되는 데이터들을 로컬 스토리지와 세션 스토리지에 저장하면 됌!

쿠키의 동작 방식

  1. 클라이언트가 페이지를 요청
  2. 서버에서 쿠키를 생성
  3. HTTP 헤더에 쿠키를 포함 시켜 응답
  4. 브라우저가 종료되어도 쿠키 만료 기간이 있다면 클라이언트에서 보관하고 있음
  5. 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄
  6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경 할 필요가 있을 때 쿠키를 업데이트 하여
    변경된 쿠키를 HTTP 헤더에 포함시켜 응답

쿠키의 사용 예

  • 크롬에서 흔히 나오는 사이트에서 로그인 시, "아이디와 비밀번호를 저장하시겠습니까?"
  • 자동로그인
  • 특정 팝업에서 "오늘 더 이상 이 창을 보지 않음" 체크
  • 쇼핑몰 장바구니

로컬 스토리지


  • 로컬 스토리지는 window.localStorage에 위치.
  • key-value 저장소이기 때문에 key와 value들을 순서대로 저장하면 됨.
  • 값(value)으로는 String, Boolean, Number, null, undefined 등을 저장할 수 있지만,
    모두 String 형태로 반환 됨. (key도 String으로 반환!)

간단 사용법

localStorage.setItem('name', 'Rano');           // - setItem: 'name'이라는 key에 'Rano'라는 value를 저장
localStorage.setItem('birth', 1993);
localStorage.getItem('name');                   // - getItem: 'name'이라는 이름을 가진 key의 value를 가져옴
localStorage.getItem('birth');                      // "1993" 반환 (문자열 형태로 반환함)
localStorage.removeItem('birth');               // - removeItem: 해당 Item 제거 (birth라는 key를 제거 (key-value 모두))
localStorage.getItem('birth');                      // 위에서 삭제했기에 null
localStorage.clear();                           // - clear: 전체 삭제
  • 만약 객체를 저장하려면 제대로 저장되지 않고 toString() 메소드가 호출된 형태로 저장되니까
    객체를 JSON.stringify하여 문자열 형태로 변환하여 저장
    가져올 때는 JSON.parse를 사용하여 가져오면 됨.
  • 이 방법 이외의 다른 방법은 하나씩 풀어서 저장하는 것.. (key-value 형태로)

쿠키 vs 로컬 스토리지

  • 쿠키 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재.
  • localStorage는 로컬 환경에서만 컨트롤.
  • 저장된 쿠키 데이터의 쓰임이 양쪽 모두이냐를 고려했을 때
    만약 서버쪽 사용이 필수적이라면 로컬 저장소가 아닌 클라이언트와 서버와의 인터렉션이
    좀 더 효과적인 쿠키값을 사용하는 것이 좋을 수도 있음

세션 스토리지


  • 세션 스토리지는 window.sessionStorage에 위치.
  • clear, getItem, setItem, removeItem, key 등 모든 메소드가 같음.

단지 로컬스토리지와는 다르게 데이터가 영구적으로 보관되지는 않을 뿐

참고자료