프론트엔드 면접 준비 : 브라우저 저장소

브라우저 저장소

• 브라우저 저장소는 클라이언트 웹 브라우저에 데이터를 저장하는 기능입니다.
• 이 기능은 웹사이트를 사용하는 다양한 클라이언트(웹 브라우저, 스마트폰, 스마트워치, 태블릿, CCTV, 센서 등)에게 응답하기 위해 서버에서 사용됩니다.
• 브라우저 저장소는 웹 브라우저를 통해 방문자의 컴퓨터에 데이터를 저장할 수 있습니다. 이 기능은 웹사이트의 성능을 향상시키고 네트워크 연결 없이도 사용 가능하게 합니다

이러한 브라우저 저장소는 쿠키(Cookie)와 웹 스토리지(Web Stroage)가 있으며, 웹 스토리지의 종류에는 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)가 있습니다.

 

1. 쿠키(Cookie)

쿠키는 웹 사이트에 접속할 때 생성되는 정보를 담은 임시 파일입니다.

서버가 사용자의 웹 브라우저에 저장하는 데이터로, Key와 Value로 구성되며 String 형태로 저장됩니다.

 

1) 특징

• 서버로 자동으로 전송되며, 클라이언트의 정보 요청 시 생성됩니다.
• 용량 제한이 있으며, 하나의 도메인 당 최대 20개, 하나의 쿠키 당 최대 4KB까지 저장 가능합니다.
• 만료 일자가 있어 일시적인 데이터 저장에 적합합니다.
• 보안에 취약하고 중요한 개인 정보를 저장할 때 주의해야 합니다.

2) 사용예시

• 장바구니 기능: 쿠키를 사용하면 여러 페이지를 이동할 때마다 로그인을 하지 않고 사용자 정보를 유지할 수 있습니다.
• 팝업에서 “오늘 이 창을 다시 보지 않기” 체크: 쿠키를 활용하여 사용자의 편의를 제공합니다
• 쇼핑몰의 ID 저장, 로그인 상태 유지, 최근 검색한 상품 추천: 모두 쿠키를 활용한 예시입니다

2. 웹 스토리지(Web Stroage)

웹 스토리지는  HTML5부터 지원하는 브라우저에 데이터를 저장할 수 있는 API 입니다.

웹 스토리지가 등장하게 된 배경은 쿠키는 저장 용량이 제한되고 보안적인 문제와 성능 저하 문제가 있었습니다.

이러한 쿠키의 단점을 보완하기 위해 HTML5에서 Web Storage를 도입했습니다. 

 

특징

• 서버전송이 없다 : 저장된 데이터가 클라이언트에 존재할 뿐 서버로의 전송은 없다 (네트워크 트래픽 비용 감소)
• 단순 문자열을 넘어 객체정보를 저장할 수 있다
• 용량 제한이 쿠키에 비해 넉넉하고, 만료일자를 따로 정하지 않음
• 오리진 단위로 접근이 제한되는 특성 덕분에 외부에서 값을 꺼내 쓸수 없다.(CSRF)
• 영구적으로 데이터를 저장할 수 있다 : 만료기간 설정이 없으며 삭제하지 않는 한 영구적으로 존재한다

이러한 웹 스토리지는 지속성에 따라 Local Storage(영구 저장소)와 Session Storage(임시 저장소)로 나뉩니다

 

1) 로컬 스토리지(Local Storage)

• 영구적으로 데이터를 저장합니다. 브라우저를 종료하고 다시 열어도 유지됩니다.
• 문자열 형식으로만 데이터를 저장할 수 있습니다.
• 사용자 프로필 정보, 테마 설정, 사용자가 저장한 문서 등에 적합합니다.
• 최대 크기: 5MB

사용예시

로컬 스토리지는 웹 브라우저에서 데이터를 저장하고 필요한 경우에 다시 불러올 수 있는 기능입니다.

주로 사용자 설정, 쇼핑 장바구니, 테마 모드 선택 등에 활용됩니다. 

 

자바스크립트를 사용하여 로컬 스토리지를 다루는 방법을 알아보겠습니다.

 

1. 데이터 저장하기 (setItem)

로컬 스토리지에 데이터를 추가하려면 localStorage.setItem(key, value) 함수를 사용합니다. 예를 들어, 사용자 이름을 저장하고 싶다면 다음과 같이 코드를 작성할 수 있습니다:

window.localStorage.setItem('username', '홍길동');

 

2. 데이터 읽어오기 (getItem)

저장된 데이터를 읽어오려면 localStorage.getItem(key) 함수를 사용합니다. 위에서 저장한 사용자 이름을 다시 불러오는 예시는 다음과 같습니다:

let username = window.localStorage.getItem('username');
console.log(username); // 홍길동

 

3. 데이터 삭제하기 (removeItem)

로컬 스토리지에서 특정 데이터를 삭제하려면  localStorage.removeItem(key) 함수를 사용합니다. 예를 들어, 사용자 이름을 삭제하고 싶다면 다음과 같이 코드를 작성할 수 있습니다.

window.localStorage.removeItem('username');

 

(참고) 로컬 스토리지는 문자열 형태로만 데이터를 저장할 수 있으므로, 객체나 배열을 JSON 문자열로 변환하여 저장하고 다시 파싱하여 사용해야 합니다.

2) 세션 스토리지 (Session Storage)

• 세션이 유지되는 동안에만 데이터를 저장합니다. 세션이 끝나면 자동으로 삭제됩니다.
• 임시 저장소로 사용되며, 로그아웃 시 데이터도 삭제됩니다.
• 사용자의 일시적 작업 데이터, 사용자가 작성한 글 등에 적합합니다.

사용예시

1. 로그인 상태 유지

사용자가 로그인한 상태를 유지하기 위해 세션 스토리지를 사용합니다.

로그인 후 세션 스토리지에 사용자 정보를 저장하고, 페이지를 이동하거나 브라우저를 닫았다가 다시 열어도 로그인 상태를 유지할 수 있습니다.

 

2. 작업 중인 데이터 임시 저장

사용자가 웹 어플리케이션에서 작업 중인 데이터를 임시로 저장할 때 세션 스토리지를 활용합니다.

예를 들어, 글 작성 중인 사용자가 브라우저를 닫았다가 다시 열면 작성 중이던 내용을 복구할 수 있습니다.

 

3. 장바구니 기능

온라인 쇼핑 웹사이트에서 사용자의 장바구니 정보를 세션 스토리지에 저장합니다.

사용자가 상품을 선택하고 장바구니에 담은 내용을 페이지를 이동하거나 브라우저를 닫았다가 다시 열어도 유지할 수 있습니다.