24.10.02 day75 브라우저의 데이터 저장방식

브라우저의 데이터 저장 방식은 여러 가지가 있으며, 다음과 같은 형태로 구분할 수 있다.

1. 쿠키(Cookies)
   • 쿠키는 웹사이트가 사용자의 컴퓨터에 저장하는 작은 데이터 파일이며, 주로 사용자 인증, 세션 관리, 개인화된 설정 등을 위해 사용된다.
   • 특징
     • 보통 한 쿠키당 4kb 이내의 크기를 가진다.
     • 만료 날짜가 설정 가능하기 때문에, 만료 날짜가 지나면 자동으로 삭제된다.
     • 서버와 클라이언트 간에 전송이 가능하며 http로 요청할 때 자동으로 포함된다.
2. 세션 스토리지(Session Storage)
   • 세션 스토리지는 사용자가 웹 페이지를 열어둔 동안만 데이터를 저장하며, 페이지가 닫히면 데이터가 사라진다.
   • 특징
     • 세션 스토리지의 데이터는 브라우저 탭이 열려 있는 동안만 유지되며, 브라우저를 새로 시작하면 전부 날아간다.
     • 세션 스토리지의 크기는 5mb정도의 크기를 가진다.
     • 해당 브라우저에서만 저장되기 때문에 다른 탭이나 창에서는 데이터에 접근할 수 없다.
3. 로컬 스토리지(Local Storage)
   • 로컬 스토리지는 사용자가 명시적으로 삭제하지 않는 한 데이터를 영구적으로 저장하며, 세션 스토리지와 달리 브라우저를 닫아도 데이터가 유지된다.
   • 특징
     • 로컬스토리지의 크기는 5mb에서 10mb정도로 세션 스토리지보다 크다.
     • 데이터는 영구적으로 저장되며, 삭제하기 전까진 브라우저를 닫아도 유지된다.
     • 그렇기 때문에 다른 창이나 탭에서도 동일한 도메인 내에서는 접근이 가능하다.
4. IndexedDB
   • IndexedDB는 브라우저 내에서 대량의 구조화된 데이터를 저장할 수 있는 비관계형 데이터베이스이며, 복잡한  데이터 구조와 대량의 데이터를 처리할 때 사용한다.
   • 특징
     
     • IndexedDB는 비동기 api로 작동하며 성능이 우수하다.
     • 트랜잭션을 지원해 데이터의 무결성을 보장한다.
     • IndexedDB는 크기 제한이 거의 없고, 브라우저에 따라 다르다.
5. WebSQL
   • WebSQL은 SQLite 기반의 데이터베이스로, 브라우저에서 SQL 쿼리를 사용하여 데이터를 저장하고 관리할 수 있는 방식이다. 하지만 이 기술은 표준화되지 않아서 사용이 제한적이다.
   • 특징
     • 데이터 양이 적은 어플리케이션에 사용된다.
     • 기술 자체가 표준화되지 않아서 크롬에서만 지원된다.
     • 크기 제한은 브라우저에 따라 다르다.
6. Cache Storage
   • Cache Storage는 웹 애플리케이션이 네트워크 요청의 응답을 캐시하여 오프라인에서도 사용할 수 있도록 하며, 주로 Progressive Web Apps(PWAs)에서 사용된다.
   • 특징
     • 네트워크 요청과 응답을 저장하고 관리할 수 있는 기능을 제공한다.
     • IndexedDB와 같은 비동기 api로 성능이 좋다.
     • 캐시된 데이터는 사용자가 삭제할 때까지 계속 유지된다.

---

이름이 비슷해서 세션과 세션스토리지가 비슷한걸로 생각하고 있었는데 다른 개념이더라.

 

세션은 사용자가 웹 애플리케이션과 상호작용하는 동안의 상태를 나타내며, 주로 서버에서 관리된다. 하지만 세션 스토리지는 클라이언트에서 데이터를 저장하며, 브라우저의 현재 세션 동안만 데이터를 유지한다.

 

차이점
저장 위치

• 세션은 서버에 저장된다.
• 세션 스토리지는 클라이언트(브라우저)에 저장된다.

식별 방식

• 세션은 세션ID를 쿠키를 통해 식별한다.
• 세션 스토리지는 자바스크립트 코드를 통해 직접 접근할 수 있다.

데이터 유지 기간

• 세션은 사용자가 로그아웃하거나 세션이 만료될 시 종료된다.
• 세션 스토리지는 브라우저 탭이 열려 있는 동안 유지되며 창이 꺼지면 사라진다.

접근성

• 세션은 여러 탭이나 창에서 데이터를 공유할 수 있다.
• 세션 스토리지는 해당 브라우저 창에서만 데이터가 유지되기 때문에 같은 탭에서만 접근이 가능하다.

용도

• 세션은 주로 사용자 인증이나 상태 정보 관리에 사용된다.
• 세션 스토리지는 주로 일시적인 데이터 저장이나, 입력값을 유지할 때 사용된다.

세션스토리지의 경우 본인은 프로젝트를 할 때 JWT토큰을 이용해서 세션스토리지에 토큰 키를 저장해서 사용자 인증에 사용했다.

세션의 경우 사용자가 로그인을 했을 때 클라이언트는 서버에 로그인 정보를 전송하며, 해당 정보를 확인 후 새로운 세션을 생성한다. 이 때 서버는 고유의 세션id를 생성하고 해당 세션에 사용자 정보를 저장한다.