브라우저 저장소

▶ 브라우저 저장소가 필요한 이유

웹에서 클라이언트와 서버가 통신할 때 HTTP의 중요한 특징 중 하나로 비연결성이 있음

비연결성이란 실제로 요청을 주고 받을때만 연결을 유지해 응답을 주고 응답을 주고나면 TCP/IP 연결을 끊음

최소한의 자원으로 서버를 유지

 

이는 통신을 계속해서 유지하지 않기 때문에 자원 낭비를 줄일 수 있다는 장점이 있지만 통신을 할 때마다 새로운 연결이 계속해서 필요하다는 단점이 있음. 예를 들면 처음 웹 사이트에 방문해서 로그인을 했어도 페이지를 이동할 때마다 새롭게 로그인을 해야하는 문제 등. 이런 경우 개발자는 브라우저 저장소를 이용해서 문제를 해결할 수 있음

 

▶ 브라우저 저장소의 종류

1. 쿠키(Cookie)

웹사이트 접속시 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일

웹사이트는 쿠키를 통해 접속자의 장치를 인식하고 접속자의 설정과 과거 이용내역에 대한 일부 데이터를 저장함

별도로 삭제처리하거나 유효기간이 만료되지 않는 이상 삭제되지 않고 서버와 통신할때 자동으로 주고받음

쿠키는 변수를 텍스트 파일로 저장해둔것으로 구성요소로 이름, 값 유효기간, 도메인, 경로가 있음

쿠키값은 UTF-8로 인코딩/디코딩해서 사용함

 

쿠키 동작 방식

1. 웹 브라우저가 웹 서버에 웹페이지를 요청하면 웹 서버에서는 웹 페이지를 보내주면서 쿠키도 같이 보내줌
2. 웹 브라우저는 별도 쿠키 저장소(유효기간 여부에 따라 저장 위치 달라짐)에 쿠키를 저장
   • 쿠키는 해당 웹 페이지를 킬 때마다 불러올 수 있으며 쿠키 정보를 담아 웹 서버에 웹페이지를 요청할 수 있음

쿠키는 기본적으로 쿠키를 생성한 웹 서버에만 전송함 하지만 .으로 시작하면 같은 도메인으로 사용하는 모든 서버에 전달할 수 있음. 즉 경로 값을 통해 도메인의 기준경로(+하위 경로들까지 전부)를 지정할 수 있음

ex .naver.com은 blog.naver.com, mail.naver.com, cloud.naver.com

 

쿠키의 장점으로는 서버에 정보를 요청하지 않고 바로 꺼내올수 있어 속도가 빠르고 정보를 요청하는 빈도 수가 줄어들기 때문에 서버의 부하가 낮음

단점으로 매번 서버에 전송되고 저장 용량이 작고 클라이언트에 저장되기 때문에 보안에 취약함

다른 사람이 컴퓨터를 사용하거나 해킹하여 접속한다면 충분히 하드 디스크에서 쿠키를 열어 볼 수 있음

 

ex) 서버에 저장되는 로그인이나 장바구니, 테마나 사용자가 선호하는 값을 세팅

 

 

2.웹 스토리지(Web Storage)

브라우저에서 데이터를 저장하는 기술. 웹 스토리지로는 로컬 스토리지와 세션 스토리지가 있음

쿠키와 기능은 유사하지만 웹 스토리지에 있는 데이터들은 클라이언트에 저장만 할 뿐 서버로 전송되지 않음

Key, Value의 형태로 데이터를 저장함

 

1. 로컬 스토리지(Local Storage)
   • 브라우저 자체에 반영구적으로 데이터를 저장하고 브라우저를 종료해도 그 데이터가 유지되는 것이 특징
   • 만약 도메인(domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없음
   • ex) 다크모드, 자동 로그인
2. 세션 스토리지(Session Storage)
   
   • 세션 스토리지는 각 세션마다 데이터가 개별적으로 저장됨
   • 예를 들어 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장되는 것
   • 세션 스토리지는 로컬 스토리지와 다르게 세션을 종료하면 데이터가 자동으로 제거되며 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없음
   • ex) 로그인

브라우저 저장소의 용량은 로컬스토리지 > 세션스토리지 > 쿠키