모든 출처는 MDN 입니다.
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage
로그인에 사용되는 토큰같이 중요한 정보는 어디에 저장해야 하는가?
현대 웹 브라우저들은 (사용자의 허락 하에) 사용자 컴퓨터에 웹사이트 정보를 저장할 수 있는 다양한 방법을 제공한다.
그리고 필요할 때 그 정보들을 읽는다.
이는 장기간 데이터를 보관할 수 있게 해주고
사이트와 웹문서를 내가 지정한 설정에 따라 오프라인 상태에서도 사용할 수 있게 해준다.
Client-side storage란 무엇인가
현대의 대부분의 웹사이트들은 어떤 데이터베이스(서버의 저장소)를 이용하여 서버에 데이터를 저장하고,
필요한 데이터를 찾아오기 위해 서버-사이드 코드를 돌리고, 정적인 페이지 템플릿에 데이터를 삽입하고,
HTML 결과물을 사용자의 브라우저에 표시될 수 있게 제공한다.(-즉 동적이다.)
클라이언트 사이드 저장소는 비슷한 원리로 작동하지만 다르게 쓰인다.
이는 개발자가 클라이언트 측(사용자의 컴퓨터)에 데이터를 저장할 수 있고 필요할 때 가져올수 있게 해주는
자바스크립트 API로 구성되어 있다.
Client-side storage의 용도
- 웹사이트에 대한 선호를 개인화하기(사용자가 선택한 커스텀 위젯, 배색, 폰트 크기로 보여주기)
- 이전 활동 기록 저장하기(이전 세션에 담았던 장바구니 목록 저장하기, 로그인 유지하기)
- 사이트 다운로드가 빨라지고(잠재적으로 비용이 적게 들고) 네트워크 연결 없이도 사용할 수 있게끔 데이터를 로컬에 저장
- 오프라인 상태에서 사용할 수 있도록 웹 어플리케이션 생성 문서를 로컬에 저장하기
클라이언트 사이드 저장소와 서버 사이드 저장소는 대개 함께 사용된다.
Old fashioned : cookies
클라이언트 사이드 저장소에 대한 개념은 오래전부터 있었다.
웹의 태동기 시절, 웹 사이트들은 사용자 경험(UX)을 개인화하는 정보들을 저장하기 위해 쿠키를 사용했다.
이것이 웹에서 보편적으로 사용된 클라이언트 사이드 저장소의 제일 오래된 형태이다.
오늘날에는 클라이언트 사이드에 데이터를 저장하는 더 쉬운 방법이 있지만
이것이 현대의 웹에서 쿠키가 완벽하게 쓸모없다는 것을 뜻하지 않는다.
쿠키는 세션 ID나 access token 같은 사용자 상태와 개인화에 관련된 정보를 저장하는데 여전히 보편적으로 쓰인다.
New school : Web Storage and IndexedDB
현대의 브라우저들은 클라이언트 사이드 데이터를 저장하는데 쿠키보다 더 쉽고 더 효율적인 API들을 제공한다.
Web Storage API
이름과 대응되는 값으로 이루어진 더 작은 데이터를 저장하고 가져오는 매우 간단한 기능을 제공한다.
이는 사용자 이름과 로그인 여부, 스크린 배경색을 어떤색으로 할지 등등 같은 간단한 데이터를 저장할 필요가 있을때 유용하다.
IndexedDB API
복잡한 데이터를 저장할 수 있는 완벽한 데이터베이스를 브라우저에서 제공할 수 있게 해준다.
이는 소비자 기록의 복잡한 데이터셋부터 오디오나 비디오 파일같은 더욱 복잡한 데이터까지 저장하는 데에 쓰일 수 있다.
The future : Cache API
몇몇 현대적인 브라우저들은 새로운 Cache API를 제공한다.
이 API는 특정 requests에 대한 HTTP responses를 저장하기 위해 디자인되었고
웹사이트가 차후에 네트워크 연결 없이도 사용될 수 있도록 사이트 정보를 저장하는 등의 일을 하는데 유용하다.
Cache는 일반적으로 Service Worker API와 함께 사용된다.(꼭 그럴 필요는 없음)
