클라이언트 단에 데이터를 저장해 두는 기술은 매우 다양하다.
어떤 브라우저가 얼마나 웹 데이터 저장소를 할당할지, 용량이 다 찼을 때 무엇을 지울지에 따라 그 과정이 심플하진 않다.
브라우저의 데이터 storage를 사용할 수 있도록 지원하는 기술엔 IndexedDB API, Cache API, Cookies, Web storage등이 있다.
IndexedDB API
IndexedDB API는 많은 양의 구조화된 데이터를 클라이언트 단에 저장하기 위한 low-level의 API이다.
이 API는 데이터를 찾을 때 고효율을 낼 수 있게 인덱스를 사용한다고 한다.
반면 뒤에 말할 Web Storage는 IndexedDB보단 작은양의 데이터를 저장하는데 유용하며 구조화된 데이터의 많은 양을 저장하기엔 다소 부족하다고 한다.
Web Storage
web storage는 key-value로 데이터를 저장하고 key를 기반으로 데이터를 조회하는 web api중 하나이다.
web storage는 데이터의 지속성에 따라 sessionStorage와 localStorage 2가지 방식으로 나뉘어져있다.
sessionStorage
- 각각의 출처(url)에 독립적인 저장공간을 세션이 유지되는 동안 제공한다.
- 따라서, 브라우저 또는 탭이 닫히기 전까지만 데이터를 저장한다.
- 데이터를 절대 서버로 전송하지 않는다. (쿠키와의 차이점!)
- 저장공간이 cookie보다 크다. (최대 5MB)
localStorage
- (일부러 삭제하지 않는 이상) 유효기간 없이 데이터를 저장할 수 있어서 브라우저를 닫았다 열어도 데이터가 남아있다.
- 데이터를 지우려면 JavaScript를 코드로 삭제하거나 브라우저의 캐시 또는 localStorage데이터를 지워야한다.
- 저장공간이 cookie, sessionStorage보다 크다.
Cookie
cookie는 사이트를 방문하고 이용할 때 브라우저 측에 저장된다.
탈취가 쉽고 클라이언트 단에서 변경이 가능해서 중요하고 민감한 정보는 담아두지 않아야 한다.
- 쿠키 사용 예 ) 로그인창의 아이디 자동완성, 공지창의 오늘하루 보지않기, 로그인 전 상태에서 본 상품목록
Session
세션을 사용하는 사이트를 이용하면 서버에서는 사용자를 구분하기 위해 기한이 짧은 임시키(세션아이디)를 브라우저에 전달해 쿠키로 저장한다.
사이트를 돌아다닐 때마다 http요청에 쿠키에 있는 이 세션아이디를 실어서 전송하면 서버측에선 그것을 보고 사용자를 인지하여 해당 사용자의 정보를 가공해서 응답으로 보내게 된다. ( sessionID를 이용한 인증 & 인가 )
번외) Cache
캐시란 개념은 웹 뿐만 아니라 컴퓨터의 메모리나 안드로이드 등 다양한 곳에서 쓰이는데, 거의 공통적인 의미로 가져오는데 비용이 드는 데이터를 한번 가져온 뒤엔 임시로 저장해두는 것을 의미한다.
참고
- https://www.youtube.com/watch?v=OpoVuwxGRDI&list=PLpO7kx5DnyIFQ4XuYirD--DvRyUgaHD9w&index=8
- https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API ( IndexedDB API )
- https://developer.mozilla.org/ko/docs/Web/API/Web_Storage_API ( Web Storage API )
- (https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies) ( HTTP 쿠키 )
- https://web.dev/i18n/ko/storage-for-the-web/ (Storage for the web)
