웹 스토리지는 해당 도메인과 관련된 특정 데이터를 서버가 아니라 클라이언트에 저장 할 수 있도록 하는 기능이다.
1.클라이언트가 서버에 방문한 정보를 클라이언트 단에 저장하는 작은 파일을 의미한다.
2.클라이언트의 브라우저 메모리 혹은 하드디스크에 저장이 된다.
3.매번 서버에 전송되므로 크기가 클 경우 서버에 부담이 갈 수 있다.
4.대략 4KB까지의 데이터를 저장할 수 있으며 유효 기간이 존재한다.
1.클라이언트에 데이터를 저장할 수 있도록 HTML5부터 새롭게 지원하는 저장소이다.
2.키(Key)와 값(Value)의 쌍 형태로 데이터를 저장한다.
3.쿠키와 달리, 서버에 전송되지 않으므로 서버에 부담이 가지 않는다. (명시적으로만 전송 가능)
4.쿠키와 달리, 대략 5MB까지의 데이터를 저장할 수 있으며 유효 기간이 존재하지 않는다.
5.HTML5를 지원하지 않는 브라우저에서는 사용할 수 없다.
6.종류로는 로컬 스토리지(Local Storage) 와 세션 스토리지(Session Storage) 가 있다. 이들은 window 객체의 프로퍼티로서 존재하며, 같은 Storage 객체를 상속하기 때문에 동일한 메소드들을 가진다. 이 둘의 가장 큰 차이점은 데이터의 영구성이다.
IndexedDB 은 Transaction Database 를 사용하여 Key-Value 로 데이터를 관리하며, B-Tree 데이터 구조를 가진다.
IndexedDB 는 Transaction Model 을 따르며, 모든 변경은 Transaction 안에서 일어난다.
만약 Transaction 내에서 문제가 생긴다면, 모든 변경사항을 폐기되고 이전 상태로 돌아간다.
Version 과 N개의 Object Store 를 가진다.
브라우저는 여러 Database 를 가질 수 있다.
indexedDB.open 로 열수 있다.
키, 여러 키 유형별로 거의 모든 종류의 값을 저장합니다.
신뢰성을 위해 트랜잭션을 지원합니다.
키 범위 쿼리, 인덱스를 지원합니다.
Local storage에 비해 훨씬 더 많은 양의 데이터를 저장할 수 있습니다.
localStoage의 경우 최대 10mb저장 가능하여 적은 양의 데이터를 저장, 동기적으로 작동하고, 오직 문자열의 키&값만을 사용 할 수 잇습니다. 그에 반해 indexedDB는 많은 양의 구조화된 데이터를 저장할 때 유용하고 JS가 인식할 수 있는 자료형과 객체를 저장할 수 있다.
키, 값 형태로 데이터가 저장되며 문자열 타입이 아니어도 됩니다.
또한 비동기로 동작하기 때문에 메인 스레드 연산에 영향을 주지 않습니다.