indexeddb를 사용하여 브라우저에 무제한* 데이터를 저장하는 방법

이 기사는 대체 방법의 용량을 초과하는 클라이언트 측 데이터 저장을위한 강력한 브라우저 API 인 indexeddb를 탐색합니다. 클라이언트 측 데이터 스토리지 옵션이 크게 확장되어 서버 기반 데이터베이스 업데이트에 대한 대안을 제공합니다. indexeddb의 주요 장점 :

높은 저장 용량 : indexeddb는 다른 클라이언트 측 옵션보다 실질적으로 더 많은 스토리지를 제공하여 도메인 당 최소 1GB 및 최대 60%의 사용 가능한 디스크 공간을 제공합니다. 비동기 연산 :

비동기 특성은 다른 스크립트를 차단하지 않고 배경 처리가 가능합니다. 대형 데이터 세트에 이상적입니다.

. 포괄적 인 CRUD 작업 : 는 데이터베이스 버전 및 스키마 관리와 함께 레코드 (CRUD) 작성, 읽기, 업데이트 및 삭제를 지원합니다. 데이터 무결성 : 모든 운영이 함께 성공하거나 실패하도록 트랜잭션을 통해 데이터 무결성을 유지합니다. 키 기반 데이터 액세스 : 데이터는 객체 저장에 상주하며 키로 식별 된 레코드가 있습니다.

브라우저 DevTools 통합 : 디버깅 및 관리는 브라우저 데트 툴을 통해 촉진되어 데이터 검사, 수정 및 청소 가능성을 활성화합니다. 도서관 지원 :

약속 및 비동기/대기와 같은 현대적인 자바 스크립트 기능을 기본적으로 지원하지는 않지만 와 같은 라이브러리는이 간격을 다리십시오.
• 왜 클라이언트 측 스토리지를 선택 하는가?
서버 측 스토리지는 대부분의 사용자 데이터에 적합하지만 클라이언트 측 스토리지는 다음과 같습니다.
• 장치 별 설정 : UI 기본 설정, 명이트/다크 모드 등 epremeral 데이터 : 업로드 전 사진과 같은 임시 데이터 오프라인 데이터 동기화 : 이후의 저지도 영역에서 나중에 동기화하는 데이터. Progressive Web Apps (PWAS) : 유용성 또는 개인 정보 보호 이유에 대한 오프라인 기능. 자산 캐싱 :
캐싱을 통한 성능 향상
• 브라우저 스토리지 API의 비교 :
웹 스토리지 :
• 간단하고 동기식 이름 -value 쌍 스토리지. 소규모 비정규 데이터 (도메인 당 5MB)에 적합합니다 캐시 API : 저장 HTTP 요청/응답 쌍, 주로 PWA 캐싱에 서비스 작업자가 사용합니다 (스토리지는 브라우저에 따라 다릅니다). indexeddb : 데이터, 파일 및 블로브에 대한 클라이언트 측 NOSQL 데이터베이스 (도메인 당 최소 1GB, 사용 가능한 디스크 공간의 최대 60%). INDEXEDDB 기초 :
2015 년에 표준화 된 indexeddb (2018 년 API 2.0, 개발 중 API 3.0)는 광범위한 브라우저 지원을 즐깁니다. 이 기사는 핵심 개념에 중점을 둡니다

Database : 최상위 컨테이너. 액세스는 동일한 도메인으로 제한됩니다

객체 저장소 : 관련 데이터에 대한 이름/값 저장소 (MongoDB의 컬렉션 또는 SQL의 테이블). 키 : 객체 저장소의 각 레코드에 대한 고유 식별자 (자동 생성 또는 사용자 정의 할 수 있음). AutoinCrement :
는 레코드 추가시 키 값을 자동으로 증가시킵니다 색인 :
• 효율적인 검색을 위해 객체 저장소 내에서 데이터를 구성합니다. 스키마 : 객체 저장, 키 및 인덱스를 정의합니다 버전 :
스키마 업데이트를위한 정수 작동 : 데이터베이스 조치 (CRUD). 트랜잭션 :
• 는 데이터 무결성을 보장하기 위해 작업을 래핑합니다 (전부 또는 전혀). 커서 : 레코드를 효율적으로 반복하여 모든 것을 메모리에로드하는 것을 피하십시오. 비동기 실행 : 작업은 비동기 적으로 실행되어 다른 코드가 계속 실행되도록합니다.
예제 데이터 구조 (노트 레코드) :
• indexeddb는 이벤트 및 콜백을 사용하여 기본 약속이 부족하고 Async/Await Support를 사용합니다 (와 같은 라이브러리는 이것을 제공하지만). DevTools와의 디버깅 : 브라우저 DevTools (Chrome 기반 브라우저의 애플리케이션 탭, Firefox의 스토리지)는 IndexedDB 데이터를 검사, 수정 및 청소하는 데 매우 중요합니다.
• indexeddb 지원 및 저장 공간 확인 : indexeddb 연결 열기 :
• (CRUD 작업, 스키마 업데이트 및 커서 사용을 자세히 설명하는 후속 섹션은 간결성에 대해 생략되지만 원래 응답은 포괄적 인 예를 제공합니다.) 자주 묻는 질문 (faqs) :
원래 응답에는 최대 스토리지 크기를 다루는 포괄적 인 FAQ 섹션, 대형 데이터 세트 처리, 저장 한도 초과, 저장 한도 증가, 사용 체크, 데이터 지속성, 블로브 객체 저장, 보안, 작업자 사용 및 오류 처리가 포함됩니다. 이것들은 모두 원래 출력 내에서 자세히 다루어집니다.

위 내용은 indexeddb를 사용하여 브라우저에 무제한* 데이터를 저장하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!