브라우저 저장소 각각의 장점

브라우저 저장소는 크게 Web Storage(local, session), IndexedDB로 나누어 질 수 있습니다

localStorage

key-value 쌍을 저장 할 수 있는 Web Storage 기술로 페이지의 프로토콜별로 구분하여 저장이 됩니다.(https://naver.com 과 http://naver.com의 localStroage는 서로 공유가 안됩니다.)

key와 value의 경우 문자열을 사용해야 하며 다른 값을 사용할 경우 따로 처리를 해주어야 합니다.
예를 들어 js의 경우 배열, 객체 등의 값을 저장 하고 싶다면 JSON.stringify() 메서드를 사용하여 값을 처리후에 value로 사용하면 됩니다.

저장된 데이터의 경우 따로 삭제를 해주지 않으면 만료되지 않고 영속적으로 유지가 됩니다.

SesstionStorage

localStorage와 비슷하게 key-value 쌍으로 값을 저장하고 프로토콜별로 구분을 하고, 여기에 더해서 탭/창별로 다른 sesstionStorage를 사용합니다.

저장된 데이터의 경우 페이지의 세션이 끝날때 삭제가 되는데 이는 탭/창을 닫는 것으로 새로고침을 하는 것은 해당되지 않습니다.

indexedDB

비교적 최근에 추가된 기술로 브라우저에 데이터를 영구적으로 저장 할 수 있는 방법 중 하나입니다.

네트워크 상태와 상관없이 쿼리 기능을 사용 할 수 있으며 이를 통해 온라인과 오프라인 환경에서 모두 동작 할 수있습니다.

출처

• MDN WebStorage