sessionStorage localStorage IndexedDB 각각의 차이점에 대해 알아보자

sessionStorage에 대해

sessionStorage의 특징

sessionStorage는 크롬을 기준으로 개발자 도구 -> 상단의 Application -> Storage에 sessionStorage로 로 들어가면 각 브라우저 탭별로 접근이 가능하다 이 저장소의 특징으로는

• 휘발성 데이터여서 해당탭을 끄는 순간 데이터가 사라진다.
• 각각의 탭별로 데이터를 가지고 있다( 오리진(도메인·포트·프로토콜)이 같은 경우 각각의 탭, iframe에서 공유 됌 )
• 유효기간이 정해져 있다( 탭이 닫힐때 까지 )
• localStorage와 SessionStorage는 string형태의 key : value 값으로 저장된다.

sessionStorage의 장점

• 쿠키보다 큰 저장용량
• http를 통한 조작이 불가능함( 오직 자바스크립트만을 이용해 조작가능 )
• 네트워크 요청시 서버로 전송되지 않음( 쿠키보다 더 많은 정보를 저장해도 괜찮은 이유 )
• 웹 스토리지 객체는 도메인·프로토콜·포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다.

sessionStorage의 단점

• HTML4만을 지원하는 브라우저에서는 사용이 불가능하다

localStorage에 대해

localStorage의 특징

localStorage는 크롬을 기준으로 개발자 도구 -> 상단의 Application -> Storage에 localStorage로 로 들어가면 각 브라우저 탭별로 접근이 가능하다 이 저장소의 특징으로는

• 반영구적 데이터여서 탭을 종료해도 계속 존재한다.
• 오리진이 같은 경우 데이터는 모든 탭과 창에서 공유된다.
• 유효기간이 정해져 있지 않다.
• localStorage와 SessionStorage는 string형태의 key : value 값으로 저장된다.

localStorage의 장점

• 탭을 종료해도 반영구적으로 존재하여 자동로그인과 같은 기능에 많이 사용된다.
• 이후 모두 sessionStorage와 같다.

localStorage의 단점

• sessionStorage와 같다.

IndexedDB에 대해

IndexedDB의 특징

기존의 webStorage는 적은 용량(10mb정도)의 공간이였다면 indexDB는 따로 몇 mb와 같이 정해진 것은 없고 각 브라우저, 사용자의 저장공간(hdd, ssd)에 따라 그 공간이 달라지는 특징이 있다. 또한 indexedDb는 많은 데이터를 저장함과 동시에 index를 이용하여 빠른 검색을 할 수 있도록 설계된 저장 공간이다 이 외의 여러 장점과등은 아래와 같다.

IndexedDB의 장점

• 기존의 string형태만을 저장할 수 있었던 webStorage와는 다르게 javaScript를 기반으로한 객체지향 데이터베이스이다( JS가 인식할 수 있는 자료형과 객체를 저장할 수 있다. )
• 탭을 종료해도 반영구적으로 존재하여 자동로그인과 같은 기능에 많이 사용된다.
• 키:값 형태로 저장되는 방식은 같지만 꼭 string형태로 저장할 필요가 없다.
• 비동기 방식으로 작동한다.

IndexedDB의 단점

• 데이터 넣고 조회하는 작업이 모두 비동기
• getAll() 메소드가 많은 데이터를 호출할 때는 동작하지 않았다