[Web] LocalStorage SessionStorage Cookie

 

 

브라우저 저장소(Browser Storage)란?

 

 

브라우저 저장소는 HTML5부터 제공하는 웹 스토리지와 Cookie를 말한다. 두 가지로 분류하는 이유는 두 성질이 다르기 때문이다. 웹 스토리지는 LocalStorage와 SessionStorage로 나뉜다. 이것들을 왜 사용하게 되었을까?

 

 

과거에 클라이언트와 서버의 통신에서 클라이언트가 서버에게 데이터를 요청하고 서버가 응답을 보내주면 통신이 종료된다. 요청이 끝난다면 서버는 클라이언트의 상태 정보를 기억하지 못하기 때문에, 요청할 때 마다 해당 정보를 서버에 전송해주어야 한다. 이러한 특징으로 계속해서 통신을 해야 하기 때문에 번거로운 부분이 있었다. 이를 해결하기 위해 브라우저에 클라이언트 정보를 저장하도록 만들었다. 예를 들어, 로그인 한 정보를 브라우저에 저장해두면 클라이언트의 인증을 지속적으로 서버에 전송할 필요가 없어진다.

 

 

브라우저 개발자도구에서 Application에 들어가면 웹 스토리지인 Local, Session과 Cookie를 볼 수 있다. 웹 스토리지와 Cookie 모두 해당 도메인에 대한 데이터를 브라우저에 저장한다. 위에서 볼 수 있듯이 내 로그인 정보를 LocalStorage에 저장한 것을 볼 수 있다.

 

 

Cookie

 

 

Cookie는 서버가 클라이언트에게 전송하는 작은 데이터 파일이다. Cookie를 이용해서 서버는 브라우저에 데이터를 저장할 수 있다. Cookie에는 몇 가지 특징이 있는데, 이 특징을 아래에서 확인해보자.

• 브라우저에 작은 크기의 문자열로 저장
• 저장용량 최대 4KB
• 인증정보 및 웹사이트 설정(언어) 등 
• 이름/ 값/ 도메인정보/ 경로정보/ 만료일자/ 시간 등 저장
• 만료날짜가 지나면 쿠키 삭제
• 모든 브라우저에서 지원
• 매번 서버로 전송
• 보안에 취약함

 

 

Cookie의 세부 과정은 다음과 같다.

1. 사이트 방문
2. 브라우저에서 서버에 요청
3. 서버는 브라우저에 저장하고자 하는 쿠기와 함께 응답
4. 웹을 방문할 때 마다 브라우저는 쿠키와 함께 서버에 요청

 

 

 

웹 스토리지(Web Storage)

 

 

웹 스토리지는 위에서 말한것과 같이 LocalStorage와 SessionStorage로 나뉜다. 웹 스토지리는 키/값 쌍으로 데이터를 저장하고, 키를 기반으로 데이터를 조회한다. 필요에 따라 LocalStorage와 SessionStorage에 저장할 수 있다. 웹 스토리지는 Cookie의 단점을 보완할 수 있다. Cookie와 데이터를 저장한다는 것은 비슷하지만, 저장용량과 서버 전송 유무가 다르다. 웹 스토지리의 특징은 다음과 같다.

• 웹 스토리지에 저장된 데이터가 서버에 전송되진 않음
• 문자열 뿐만 아니라 객체데이터 저장가능
• 용량에 제한이 없음
• 영구적으로 저장 가능

 

 

웹 스토리지에서 사용하고자 하는 데이터의 지속성에 따라서 LocalStorage와 SessionStorage에 달리 저장할 수 있다. LocalStorage와 SessionStorage의 저장범위와 삭제시기에 따라 다르다.

	LocalStorage	SessionStorage
저장범위	브라우저(도메인)	브라우저(도메인) + 탭
삭제시기	직접 삭제시	브라우저 종료시
적용예시	사용자 설정 저장 작성글 임시 저장	이전페이지 저장 이전스크롤 저장
저장소	window.localStorage	window.sessionStorage

 

 

Local Storage(로컬 스토리지)

 

 

LocalStorage에 저장된 데이터는 브라우저가 종료되어도 데이터가 유지된다. 명시적으로 삭제하지 않는 한 영구적으로 저장되는 것이다. 도메인 별로 생성되며, 다른 도메인의 LocalStorage는 접근이 불가능하다.

브라우저의 탭이 다르더라도 같은 도메인이라면 동일한 로컬스토리지를 사용한다. 이러한 특성으로 지속적으로 필요한 정보를 저장하기에 좋다.

 

 

LocalStorage는 다음과 같이 데이터를 저장과 삭제를 할 수 있다.

localStorage.name = '정인'; // 리터럴 방식으로 저장

localStorage.setItem('name', '정인'); // 메서드 방식으로 저장

localStorage.removeItem('name') // name이라는 key를 가진 데이터를 삭제

localStorage.clear(); // 저장된 모든 데이터를 삭제

 

 

 

Session Storage(세션 스토리지)

 

 

LocalStorage와 달리 SessionStorage는 탭/윈도우 단위로 생성된다. 생성 이후 탭/윈도우를 닫으면 데이터가 삭제된다. 서로 다른 SessionStorage는 서로에게 영향을 주지 않고 독립적으로 동작한다.

SessionStorage는 이러한 일시적인 정보(이전 페이지/스크롤 저장, 일회성 로그인, 입력값 저장 등)에 활용된다.

 

 

SessionStorage도 다음과 같이 저장 및 삭제를 할 수 있다.

sessionStorage.setItem("jaylenyu", "메롱");

sessionStorage.getItem("jaylenyu"); // "메롱"

sessionStorage.removeItem("jaylenyu")

sessionStorage.clear(); // 저장된 모든 데이터 삭제