공부 및 일상기록

[네트워크] 브라우저 스토리지란? (Web Storage) 본문

개발/네트워크

[네트워크] 브라우저 스토리지란? (Web Storage)

낚시하고싶어요 2023. 1. 9. 17:09

브라우저 저장소 (Web Storage)는 HTML5 부터 추가된 저장소로 쿠키와 비슷한 기능이다.

 

쿠키

쿠키란 웹 사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간 지정이 가능하다. 장점으로는 대부분 브라우저가 지원을 하고 단점으로는 4KB의 작은 데이터 저장 제한으로 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 예시로는 팝업창 다시보지 않기, 아이디 비밀번호 기억하기 등이 있다.

 

로컬스토리지

가볍지만 기능이 많지 않고 단순히 key : value 를 String 타입으로 저장하는 기능만 있다. 최대 저장용량은 5~10MB로 제한하며 간단한 텍스트만 담을 수 있지만 만료기한 없이 저장이 가능하여 자동로그인에 사용된다.

 

세션스토리지

로컬스토리지와 달리 만료기한이 있어 브라우저를 종료하거나 새탭을 열 때, 데이터가 초기화 된다. 하지만 같은 탭에서 새로고침시에는 데이터가 유지된다. 즉 로컬 스토리지와 세션 스토리지의 차이는 영구성이다. 자동 임시저장 용도로 쓰이는데 예를들어 입력폼 정보저장, 비로그인 장바구니, 글쓰기 도중 내용 복구하기 등이 있다. 사용법은 로컬 스토리지와 동일하다.