🍒Local-Storage
사용자의 PC(local) 환경에 데이터를 저장할 때 데이터가 저장되는 공간을 말한다. ‘Key : value’ 데이터를 저장할 수 있는 저장소로 구조로 data type은 string만 가능하며 최대 저장용량(5mb~10mb)의 제한이 있다. 하지만 data를 만료 기간 없이 저장하고 사용할 수 있다는 장점이 있다. 사용자가 삭제하지 않는 이상 데이터는 보존되며 Client-side에서만 접근 가능하다. 단, 설계상 안전하지 않은 구조로 중요한 데이터는 해당 공간에 저장하지 않는편이 좋다.
사용 예시 ›
지속해서 필요한 데이터(자동 로그인 유,무)
🍒Session-Storage
SessionStorage는 Session이라는 단어의 의미 그대로 잠시 데이터가 저장되는 공간을 말한다. localStorage와 동일한 기능을 제공하지만, data 만료 기간에 차이가 있다. 동일한 주소더라도 브라우저 창 혹은 실행 탭이 다르면 그 환경에 맞춰 별개의 SessionStorage가 생성되며 해당 창/탭이 닫히면 데이터도 삭제된다. 브라우저를 종료하거나 새 탭을 열거나 할 때 data가 초기화된다. (같은 화면에서 refresh 했을 때는 data가 유지된다.) Client-side에서만 접근 가능하다.
Cookie와 다르게 사용자나 다른 누군가에게 노출되어서는 안되고 서비스 제공자가 직접 관리해야 할 정보들은 별도로 서버의 SessionStorage 안에서 다룰수도 있다.
사용 예시 ›
잠깐 필요한 정보(일회성 로그인 정보)
🍒Cookie
Cookie는 연속적인 XHR(XMLHttpRequest) 요청에 있어서 서버로 보내지는 데이터가 저장되는 정보를 말한다. 일반적으로 HTTP 프로토콜은 stateless한 특징이 있는데 쿠키를 사용하면 해당 프로토콜에서 상태 정보를 기억할 수 있어 사용자의 로그인 상태를 유지할 수 있다. 데이터의 타입과 만료기한을 Client/Server 둘 다 설정할 수 있지만 주로 Server-side에서 데이터를 관리한다. 하지만 유저가 임의로 수정, 삭제할 수 있고 다른 사람이 악용하기도 쉽다는 단점이 있어 민감하거나 중요한 정보를 다룰 때는 사용하지 않는다.
사용 예시 ›
로그인시 ID 자동완성
한번 본 알람/이벤트 다시 보지 않도록 해주기
쇼핑몰 사이트에서 로그인 안 한 상태로 장바구니에 물품 담기
🍒Indexed DB
사용자의 브라우저에 데이터를 영구적으로 저장할 수 있는 방법의 하나로 대용량의 데이터를 key-value 형태로 저장할 수 있다는 장점이 있지만 웹저장소와 다르게 별도의 사용법을 적용해야 해서 상대적으로 사용하기 까다롭다.
🍒Cache
가져오는 데 비용이 드는 데이터를 한 번 가져온 뒤에 임시로 저장해둔 장소를 가리킨다. 캐시에 데이터를 미리 복사해 놓으면 계산이나 접근 시간을 소요할 필요 없이 빠른 속도로 데이터에 접근할 수 있다.
