브라우저 저장소의 차이점 (local storage, session storage, cookie)

cookie와 web storage의 차이

web storage

• HTML5에 포함되어 있는 스펙으로 웹의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조이다
• key-value 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회할 수 있다
• local storage와 session storage로 구성되어 있다
• 기존에 사용되던 쿠키의 단점을 개선한 스펙이다

---

• 웹사이트에서 쿠키를 설정하면 이후 모든 요청은 쿠키 정보를 포함하여 서버로 전송되기 때문에 불필요한 트래픽을 발생시킬 수 있다
• webstorage는 데이터가 클라이언트에 저장이 되어있을 뿐 서버로의 전송은 이루어지지 않는다

---

• web storage는 객체 정보를 저장할 수 있다. -> 개발 편의성적인 측면으로 쿠키보다 편리하다
• 각 브라우저 별로 지원 여부를 확인해야 한다

---

• 쿠키는 한 개의 쿠키 당 약 4kb로 제한되어 있고 개수는 300개, 하나의 도메인 당 20개로 제한되어 있다
• web storage는 이러한 제한이 없다

---

• 쿠키는 만료일자를 설정하지 않으면 세션 쿠키, 지속되면 지속적 쿠키로 간주된다
• 세션 쿠키의 경우 메모리에 저장이 되어 임의로 삭제하거나 만료일이 도래하기 전까지는 데이터가 저장된다
• web stoarge 경우에는 만료 기간의 설정이 없다

 

 

 

 

 

 

 

 

 

 

로컬 스토리지 (local storage)

• 저장된 데이터는 브라우저를 종료해도 지속적으로 유지됩니다.
• 도메인별로 Local Storage가 생성되고, Windows 전역객체의 Local Storage 컬렉션을 통하여 저장과 조회가 이루어진다

 

 

 

 

 

 

세션 스토리지 (session storage)

• 데이터의 지속성과 액세스 범위에 제한이 있다
• windows 전역 객체의 session storage라는 컬렉션을 통하여 저장과 조회가 이루어진다
• 브라우저가 열려 있는 동안에는 유지되고 브라우저가 종료되면 데이터는 삭제된다
• 같은 사이트의 같은 도메인이더라도 브라우저가 다르면 서로 다른 저장소를 생성한다 (브라우징 되고 있는 브라우저 컨텍스트 내에서 생성되고 유지되기 때문)