IndexedDB에 대한 빠르고 완벽한 가이드 및 브라우저에 데이터 저장

JavaScript 학습에 관심이 있으십니까? jshandbook.com에서 무료 전자 책 받기

IndexedDB는 수년 동안 브라우저에 도입 된 스토리지 기능 중 하나입니다. 브라우저에 데이터를 저장하기위한 결정적인 솔루션으로 간주되는 키 / 값 저장소 (NoSQL 데이터베이스)입니다.

IndexedDB는 비동기식 API이므로 비용이 많이 드는 작업을 수행해도 UI 스레드가 차단되지 않아 사용자에게 느슨한 경험을 제공합니다.

특정 임계 값을 초과하면 사이트에 더 높은 한계를 부여하라는 메시지가 표시되지만 무한한 양의 데이터를 저장할 수 있습니다.

모든 최신 브라우저에서 지원됩니다.

트랜잭션 및 버전 관리를 지원하고 우수한 성능을 제공합니다.

브라우저 내부에서도 사용할 수 있습니다 :

  • 매우 적은 양의 문자열을 호스팅 할 수있는 쿠키
  • DOM 스토리지 (또는 웹 스토리지)는 두 개의 키 / 값 저장소 인 localStorage와 sessionStorage를 공통적으로 식별하는 용어입니다. sessionStorage는 세션을 종료 할 때 지워지는 데이터를 보유하지 않으며 localStorage는 세션 전체에서 데이터를 유지합니다.

로컬 / 세션 스토리지는 사이트 당 2MB에서 10MB의 공간을 제공하는 브라우저 구현으로 작은 (일관되지 않은) 크기로 제한되는 단점이 있습니다.

과거에는 SQLite를 감싸는 Web SQL도있었습니다. 그러나 이것은 일부 최신 브라우저에서 더 이상 사용되지 않으며 지원되지 않습니다. 사용자의 83 %가 Can I Use에 따라 장치에이 기술을 보유하고 있지만이 표준은 인정 된 표준이 아니므로 사용해서는 안됩니다.

기술적으로 사이트 당 여러 데이터베이스를 만들 수 있지만 일반적으로 하나의 단일 데이터베이스를 만듭니다. 해당 데이터베이스 내에서 여러 오브젝트 저장소를 작성할 수 있습니다.

데이터베이스는 도메인 전용이므로 다른 사이트는 다른 웹 사이트의 IndexedDB 저장소에 액세스 할 수 없습니다.

각 상점에는 일반적으로 다음과 같은 것들이 포함됩니다.

  • 번호
  • 사물
  • 배열
  • 날짜

예를 들어 게시물이 포함 된 상점과 주석이 포함 된 상점이있을 수 있습니다.

상점에는 고유 키가있는 여러 항목이 포함되어 있으며 이는 오브젝트를 식별하는 방법을 나타냅니다.

추가, 편집 및 삭제 조작을 수행하고 포함 된 항목을 반복하여 트랜잭션을 사용하여 해당 상점을 변경할 수 있습니다.

ES2015에서 Promises가 등장하고 이후 API를 약속 사용으로 전환 한 이후 IndexedDB API는 약간 오래된 학교로 보입니다.

그것에 대해 아무 문제가 없지만, 내가 설명하는 모든 예제에서 Jake Archibald의 IndexedDB 약속 라이브러리를 사용합니다.이 라이브러리는 IndexedDB API 위에 작은 계층으로 사용하기가 더 쉽습니다.

이 라이브러리는 Google Developers 웹 사이트의 IndexedDB와 관련된 모든 예제에서도 사용됩니다.

IndexedDB 데이터베이스 생성

다음을 사용하여 idb lib를 포함하십시오.

원사 추가 idb

그런 다음 Webpack 또는 Browserify 또는 다른 빌드 시스템을 사용하거나 다음과 같이 페이지에 포함하십시오.