웹 스토리지

웹 스토리지란?

자바스크립트로 웹 개발을 하다보면 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생긴다.
보통 이럴 때 DB 서버나 클라우드 플랫폼에 데이터를 저장하는 경우가 많다.

하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버에 저장하는 것이 낭비가 될수 있다. 이를 위해 브라우저 상에 데이터를 저장할 수 있는 기술인 웹 스토리지가 있다.
ex) Local Storage, Session Storage, Cookie

웹 스토리지의 종류

쿠키

• 브라우저 요청이 있을 경우 자동으로 서버에 전송한다.
• 사용자의 하드에 저장되어 보안위험이 있다.
• 같은 도메인상에서 쿠키 값은 공유된다.
• 하나의 쿠키는 4KB까지 저장 가능하다.
• key, value 데이터 파일로 이름, 값, 만료 날짜, 경로 정보가 필요하다.

스토리지

• 쿠키의 단점을 보완해서 만든 기술이다.
• key,value로 이루어진 데이터 파일이다.
• 서버의 자원이 사용하므로 서버의 공간이 필요하다.
• 기기마다 차이는 있으나 모바일 2.5MB, 데스크탑 5MB~10MB정도 저장 가능하다.
• 쿠키 보다 보안이 우수하며 많은 정보를 담을 수 있다.
• Local Storage, Session Storage로 나뉘며 데이터의 만료에 따라 나뉜다.
• Local Storage=만료기한 없음, Session Storage=세션 종료시 만료

쿠키(Cookie)에 대해서

쿠키(Cookie)

• 클라이언트 로컬에 저장되는 key,value값이 들어 있는 데이터 파일이다
• 서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용한다.
• 재 요청시 저장된 값을 참조, 재사용한다.
• 사용자의 하드에 저장되기 때문에 공공장소에서 해킹 등의 악용이 가능하다.
• 클라이언트에 300개, 하나의 도메인에 20개의 값만 저장되며 하나의 쿠키는 4KB까지 저장 가능하다.
• 이름, 값, 만료 날짜, 경로 정보가 있어야 하며 일정시간 동안 데이터를 저장할 수 있다.
• 같은 도메인 상에서 쿠키의 값은 공유된다.
• 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.

웹사이트에서 쿠키

• 필수적인 쿠키 : 페이지 탐색, 웹사이트 보안 영역 접속, 기본 기능 활성화
• 기능 쿠키: 접속자의 지역, 언어 등
• 성능 쿠키: 정보의 익명 수집, 보고
• 마케팅 쿠키 : 방문 내역 추적

쿠키가 서버로 계속 전성되는 이유는 무엇일까?

• HTTP요청은 클라이언트의 상태에 대한 정보를 가지고 있지 않다.
• 브라우저에서 서버로 클라이언트에 대한 정보를 가져오라는 GET요청을 보낼때, 서버는 요청 자체만으로 그 요청이 어떤 클라이언트에게서 온 것인지 정보가 없다.
• 그래서 요청에 대한 응답을 할 수 없는데, 이 때 쿠키에 클라이언트의 정보를 담아서 서버에 보내면 서버는 쿠키를 읽어서 클라이언트를 파악한다.
• 쿠키는 서버-클라이언트간의 지속적인 데이터 교환을 위해 만들어졌다.

API 사용 방법

• 현재 저장된 쿠키 정보 => document.cookie
• 저장 => document.cookie = 'key=value'
• 삭제 => document.cookie = 'name= ; expires = Sat; 01 Jun 2022 02:31:46GMT; path=/'

사용 사레

• '오늘 팝업을 열지 않음'
• 장바구니
• 자동 로그인