indexedDB

localStoage의 경우
: 적은 양의 데이터를 저장할 때 유용하다.
: 동기적으로 작동하며, 오직 문자열 타입의 키&값만을 사용할 수 있다.
: 그렇기 때문에 JSON.stringify, JSON.parse와 같은 함수가 꼭 필요하다.

indexedDB의 경우
: 그에 반해 indexedDB는 많은 양의 구조화된 데이터를 저장할 때 유용하다.
: localStoage와 달리, JS가 인식할 수 있는 자료형과 객체를 저장할 수 있다.
: 키, 값 형태로 데이터가 저장되며 문자열 타입이 아니어도 된다.
: 특이한 점은 비동기적으로 작동한다는 점이다.

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

모든 동작이 비동기호출
사용하고자 하는 DB를 오픈하면 오픈 되었다는 onsuccess 메소드 안에서 동작할 코드를 작성하거나 callback 함수를 실행해야 한다
하지만 서버로부터 데이터를 받아오고 저장을 한 뒤 저장된 데이터로부터 특정 조건의 데이터를 조회하는 소스코드를 작성할 때 실수 (서버 -> 데이터 저장 -> 저장된 데이터로부터 특정 조건의 데이터 조회하는 소스코드 작성)

saveData로 서버로부터 가져온 10만건의 데이터인 receivedData를 저장하고 바로 다시 전체 데이터를 조회해오는 동작 생각, 구현

1. 데이터베이스 열기
2. 데이터베이스에 객체 저장소 생성하기
3. 트랜젝션 시작하기 (읽기,쓰기,제거 등)
4. 이벤트 리스너를 사용하여 요청이 완료될 때까지 기다리기
5. 요청 결과를 가지고 어떤 동작하기

• 브라우저에서 여러 개의 데이터베이스를 만들 수 있다
• 데이터베이스는 버전 정보를 가지고 있으며 여러 개의 객체 저장소를 가질 수 있다
• 데이터베이스 수정 시 버전을 수정해줘야 한다
• open 명령어를 사용해 데이터베이스를 열도록 요청할 수 있다

// 1. indexedDB 객체 가져오기
const idxedDB = window.indexedDB;

// 2. 브라우저에서 지원하는지 체크하기
if (!idxedDB) window.alert('해당 브라우저에서는 indexedDB를 지원하지 않습니다.')
else {
  let db;
  const request = idxedDB.open('SampleDB');   // 3. SampleDB(db) 열기
  request.onerror =(e)=> alert('failed');
  request.onsuccess =(e)=> db = request.result;
}

database에 ObjectStore 추가하기
ObjectStore : 데이터를 담는 공간,
onupgradeneeded

• 새로운 데이터베이스 만들 때
• 기존 데이터베이스의 버전을 높일 때
• sampleDB를 열고 db에 name이라는 이름의 ObjectStore를 추

SampleDB : db에 name이라는 이름의 objectStoref=f

errorwork메소드 동작
indexDB는 특정 트랜잭션이 종료되어야지만 commit이 된다
모든 데이터 저장이 완료되어야지만 commit

errorwork -> saveData
indexedDB는 특정 트랜잭션이 종료되어야지만 commit이 된다
모든 데이터 저장이 완료 되어야지만 commit이 된다