브라우저 저장방식

개요

 

자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생깁니다. 보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하거나 경우가 많을 것입니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다.

 

따라서 중요하지 않거나 클라이언트에서 사용될 수 있는 작은 데이터를 효율적으로 사용하기 위해 서버가 아닌 프론트 웹 브라우저에 저장하는 기술을 브라우저 저장방식

 

종류

• 쿠키
• 웹 스토리지
  • 로컬 스토리지
  • 세션 스토리지
• IndexedDB

 

브라우저 저장방식은 개발자도구에서 확인 가능

 

---

쿠키

쿠키는 웹사이트 접속시 해당 사이트에 대한 만료 기한이 있는 데이터를 저장할 때 사용되는데, 유저가 처음 웹사이트에 접속(데이터를 요청)한다면 접속한 장치에 다운로드 되어 브라우저에 저장되는 작은 파일입니다.

쿠키는 대표적으로 두가지 특징이 있는데 한가지는 만료기한입니다. 만료 기한이 있기 때문에 우리가 발급받았던 쿠키들이 사라지게 되는데 대표적인 예시로 이벤트 팝업이 있습니다. “하루동안 다시 보지 않기”

두 번째로는 서버에 요청을 보낼 때 마다 쿠키가 같이 전송된다는 점입니다. 대표적인 예시로는 현재 로그인 상태를 쿠키로 저장하게 되는데 이 때 서버에서는 매번 날라오는 이 쿠키를 통해 로그인 상태인지를 확인하고 데이터를 보내주게 됩니다.

 

→ 하지만 암호화 되지 않아 쿠키에 직접적인 로그인 정보를 저장하지는 않고 상태를 확인할 수 있는 부분들을 저장하게 됩니다( 민감한 정보는 서버에 저장)

 

종류도 여러가지가 있습니다(참고)

 

한국 쿠키 정책

한국 쿠키 정책

View, edit, and delete cookies - Chrome Developers

View, edit, and delete cookies - Chrome Developers

쿠키 vs 로컬스토리지: 차이점은 무엇일까?

쿠키 vs 로컬스토리지: 차이점은 무엇일까?

---

웹 스토리지

HTML5 부터 지원되고 있으며 그 이전 버전에서는 웹 스토리지를 사용할 수 없습니다.

현재는 key와 value 형식으로 **특정 문자열(string)**만 저장가능하며, 세션과 로컬로 구분되어 이것이 영구적으로 저장할 수 있는가로 구분되고 있습니다.

1. 세션 스토리지

해당 세션(탭)에 종속되는 데이터를 저장하는 방식을 세션 스토리지라고 합니다.

브라우저 탭을 닫는다면 내용이 제거됨 ( 브라우저의 여러개의 탭 ). 또한 같은 URL을 다수의 탭/창에서 열면 각각의 탭/창에 대해 새로운 세션 스토리지를 생성하는 방식입니다

쿠키와 비교되는 특징으로 만료기한은 지정되지 않았지만 탭이 닫힌다면 영구적으로 데이터가 날라간다는 휘발성을 가지고 있습니다.

이러한 기능은 입력폼 값을 유지하는 역할을 하거나 혹은 비로그인 유저가 있을 때 비로그인용 장바구니로 사용되기도 합니다

2. 로컬 스토리지

세션 스토리지와 비교하였을 때 로컬 스토리지는 탭이 닫혀도 데이터는 사라지지 않고 유지

세션과 마찬가지로 데이터를 저장하는 구조는 동일하고 대용량 데이터를 저장할 수 있습니다.

주로 자동로그인과 사용자가 다시 방문했을 때 다크 모드와 라이트 모드 기능을 저장하고 있게 됩니다. 또한 인터넷 연결이 원할하지 못한 곳을 서비스할 때 가끔씩 사용되기도 하지만 보안에 취약하기 때문에 민감한 정보는 저장하지 않는 것이 좋습니다.

3. IndexedDB (인덱스된 데이터베이스)

키 값을 가지고 실제 데이터베이스 역할을 하는 브라우저 저장방식 중 하나

색인이 포함된 JSON 객체가 모여있는 트랜잭셔널 로컬 데이터베이스를 위해 W3C 가 권고한 웹 브라우저 표준 인터페이스의 하나로 기존 스토리지와의 차이점으로는 string만 저장할 수 있는 스토리지에 비해 Javascript가 이해하는 값은 어떤 것이든 저장할 수 있고 저장용량제한(브라우저에 설정된 값이나 하드디스크에 따라 달라질 수 있습니다.)없이 많은 양에 데이터를 저장할 수 있습니다

 

이러한 데이터들을 빠르게 검색하기 위해 인덱스된 구조를 사용했습니다.

 

쉽게 이해해보면 브라우저에서는 키값만 가지고 있고 실제 큰 데이터는 디스크에 저장해두는 방식 → 디스크 저장 용량이 크기 때문입니다. 그렇기 때문에 속도는 느리다고 할 수 있습니다

 

(참고)

메모리에 대용량 데이터를 성능적으로 올릴 수 없기 때문에 대용량 데이터는 디스크에 저장

 

주로 스토리지에는 작은 데이터들을 저장하고 indexedDB에는 스토리지보다 큰 데이터를 넣는 것이 성능적으로 유리하다고 알려져있고 로컬 스토리지처럼 데이터가 사라지지 않는다는 특징이 있기때문에 로컬 스토리지 대용으로 사용될 수 있습니다.

IndexedDB 사용하기 - Web API | MDN

IndexedDB 사용하기 - Web API | MDN

IndexedDB 간단 정리하기

IndexedDB 간단 정리하기

Storage for the web

웹용 스토리지

FE Developer TriplexLab(트리플엑스랩)

[JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리