🌐 저장소

🌈 브라우저 저장소(Web Storage)

• HTML5부터 제공하는 기능으로, 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트 웹브라우저에 저장할 수 있도록 제공하는 기능
• 쿠키와 비슷한 기능, Web Storage의 개념은 키 /값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.
• 쿠키와 마찬가지로 사이트의 도메인 단위로 접근이 제한된다.

📌 특징

1. 서버 전송이 없다. 👉 네트워크 트래픽 비용을 줄일 수 있다.
   
2. 단순 문자열을 넘어 객체정보를 저장할 수 있다.
   
3. 용량의 제한이 없다.
   
4. 영구 데이터 저장이 가능하다. (만료 기간이 없다. )

✅ 필요한 이유

1. 4KB의 데이터 저장 제한
   
2. HTTP Request에 암호화 되지 않은 상태로 사용하기 때문에 보안이 취약하다.
   
3. 쿠키는 모든 HTTP Request에 포함되어 있어 웹 서비스 성능에 영향을 줄 수 있다.

🔈 Web Storage의 종류

1. LocalStorage
2. SessionStorage

LocalStorage

• 브라우저를 닫았다가 다시 열어도 계속 유지된다. 저장한 데이터를 지우지 않는 한 영구적으로 보관이 가능하다.
  
  👉 도메인마다 별도로 LocalStorage가 생성된다.
  
  👉 도메인만 같으면 전역으로 공유가 가능하다.
  

SessionStorage

• 브라우저가 열려있는 한 페이지를 Reload해도 유지된다. 하지만 브라우저를 닫으면 삭제된다.
  
  👉 WebStorage의 기본 보안처럼 도메인별로 별도로 생성된다. 같은 사이트의 같은 도메인이라도 브라우저가 다르면 서로 다른 영역이 된다. 브라우저 컨텍스트가 다르기 때문이다.