[Web] 웹 스토리지 (세션스토리지, 로컬스토리지)

 

쿠키의 특징

• 쿠키는 클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미함.
• 매번 서버에 전송되므로 크기가 클 경우 부담이 갈 수 있음. 또한 SameSite 옵션이 Strict가 아닌 경우, 다른 도메인에서 요청할 때도 자동 전송되는 위험성이 있음.
• 대략 4KB 까지의 데이터를 저장할 수 있으며 유효 기간이 존재함.

 

웹 스토리지 (Web Storage)

• 클라이언트에 데이터를 저장할 수 있도록 HTML5 부터 새롭게 지원하는 저장소임.
• Key 와 Value 의 쌍 형태로 데이터를 저장함.
• 쿠키와 달리,
  • 서버에 전송되지 않으므로 서버 부담이 없음. (명시적으로만 전송 가능)
  • 필요한 경우에만 꺼내 쓰는 것이므로 자동 전송의 위험성이 없음. (다른 도메인에서 요청하는 경우에는 꺼내 쓸 수 없어 안전함)
  • 5MB 까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않음.
• 종류로는 로컬 스토리지와 세션 스토리지가 있음. ⇒ 이 둘의 가장 큰 차이점은 데이터의 영구성!

 

로컬 스토리지 (Local Storage)

• window.localStorage 객체임.
• 브라우저를 종료해도 유지되는 데이터로, 명시적으로 지우지 않는 한 영구적으로 저장됨.
• 도메인 별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능함.
• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용함.
• 지속적으로 필요한 정보를 저장하기에 좋음 : 자동 로그인

 

세션 스토리지 (Session Storage)

• window.sessionStorage 객체임.
• 탭 / 윈도우 단위로 생성되며, window 객체와 동일한 유효 범위 및 생존 기간을 가짐. 탭 / 윈도우를 닫을 시 데이터가 삭제됨.
• 동일한 탭 / 윈도우라도 다른 도메인이라면 또 다른 세션 스토리지가 생성됨. 서로 다른 세션 스토리지는 서로 영항을 주지 않으며 독립적으로 동작함.
• 윈도우 복제로 생성되거나 스크립트로 새 창을 연 경우, 세션 스토리지가 복제되어 생성됨.
• 잠시 동안 필요한 정보를 저장하기에 좋음 : 입력 폼 저장, 일회성 로그인 등

 

[참고/인용]

• 쿠키, 웹 스토리지 : https://it-eldorado.tistory.com/90