🍪 Cookie, Web Storage, Token - Web Storage

작성일 | In

Web Storage

  • 쿠키와 달리 서버에 전송되지 않으며, 각 도메인마다 독립적으로 작동.
  • 크기 제한이 있는 쿠키보다 훨씬 크며 (일반적으로 5MB 이상), 데이터를 키-값 쌍으로 저장
  • Local Stroage 와 Session Storage

Local Storage

  • 도메인 단위로 구분 (도메인이 같다면 path가 달라도 서로 데이터 공유)
  • 도메인 : url의 프로토콜(http://) 바로 뒷부분에 따라오는 문자를 통해 도메인을 확인
  • 브라우저 자체를 종료해도 존재.
  • 비휘발성 메모리

Session Storage

  • 세션 단위로 구분
  • 세션 : 사용자가 브라우저를 통해 페이지에 접속하는 순간부터 접속을 종료하는 시점까지
  • 브라우저, 탭을 종료하면 영구 삭제.
  • 휘발성 메모리

Storage Method

  • Storage.key()
    숫자가 전달되면 저장소에 있는 n번째 키의 이름을 반환
  • Storage.getItem()
    키 이름을 전달하면 해당 키의 값이 반환
  • Storage.setItem()
    키 이름과 값이 전달되면 해당 키를 저장소에 추가하거나, 이미 키 값이 존재하면 키 값을 업데이트
  • Storage.clear()
    호출 시 저장소의 모든 키가 비워짐

Storage 설정

저장된 storage 정보 확인

  • 개발자 도구 → 애플리케이션 → 저장용량 → Storage → Key / Value

Storage 저장

  • setItem() 메서드 사용
    1
    Storage.setItem('key', value);

Storage 데이터 가져오기

  • getItem() 메서드 사용
    1
    Storage.getItem('key');

Cookie vs Web Storage 차이

  • 쿠키 : 서버와의 데이터 교환을 위해 사용.
  • 웹 스토리지 : 클라이언트 측에서 데이터를 저장하는 데 주로 사용.
  • 웹 스토리지는 쿠키보다 더 많은 데이터를 저장할 수 있으며, 서버와의 자동 교환이 없음.

token을 Storage에 담는다면, 탭을 닫아도 유효해야 API 호출 횟수를 줄일 수 있고 도메인 전역에서 사용해야하기에 Local Storage에 담는게 적합. Local Storage와 Cookie 중에 고민이 되었다.

Storage는 XSS 공격에 취약하고, 직접 지워주지 않는 이상 계속 유지가 된다. 5분마다 토큰의 값이 변하는 것을 고려하면 토큰 값이 저장된 이후 5분 뒤에 계속 clear() 메소드를 호출해주어야한다.

이런 점에서는 만료기간을 정할 수 있고 XSS 공격에 조금 더 안전한 Cookie 에 저장하는게 더 적합하다고 판단했다.

🍪 불필요한 토큰 호출 방지 트러블슈팅

Token

클라이언트가 서버에 접속하면 서버에서 해당 클라이언트에게 인증되엇다는 의미로 ‘토큰’을 부여.
이 토큰은 유일하며 토큰을 발급받은 클라이언트는 또 다시 서버에 요청을 보낼 때 요청 헤더에 토큰을 심어서 보냄.
그러면 서버에서 클라이언트로부터 받은 토큰을 서버에서 제공한 토큰과의 일치 여부를 체크하여 인증 과정을 처리.

토큰에 대한 설명

안써본 문법을 막상 사용하기 전까지는 매우 어렵다라는 생각만 가지고 있는 것 같다.
web storage 같은 경우도 설정하고 꺼내오는 방법에 대해 잘 몰랐고, 이건 어려운 문법이다 라고만 생각하고 실제로 사용해 본 적이 없는 것 같다. 모르면 공부해보고 무작정 코드를 써보면서 가지고 놀 줄 알아야하는데, 막상 두려움이 앞서서 나중에 해야겠다고 생각하는 것 같다.
이런 마음을 좀 줄여나가려고 한다. 몰라도 무조건 찾아보고 무조건 써보기!