일반적인 프론트엔드 데이터 저장 솔루션은 주로 다음과 같습니다:쿠키, 웹 저장소, 인덱스 데이터베이스, 웹SQL, 로컬 저장소, 세션 저장소예를 들어:
| 특성 | 쿠키 | localStorage | 세션스토리지 | indexedDB | | 데이터 수명 주기 | 일반적으로 서버에서 생성하는 만료 시간은 설정할 수 있습니다; 프론트엔드 채택이나 js-cookie와 같은 컴포넌트도 생성할 수 있습니다 | 청소되지 않는 한, 항상 그 자리에 남아 있습니다; 브라우저가 닫히면 로컬에도 저장되지만, 크로스 브라우저는 지원되지 않습니다 | 페이지가 닫혀도 페이지 정리 및 새로고침은 여전히 존재하며, 교차 페이지 상호작용은 지원되지 않습니다 | 청소되지 않는 한, 항상 존재해 왔습니다 | | 데이터 저장소 크기 | 4K | 5세 남자 | 5세 남자 | 크기 제한은 없습니다 | | 서버와 소통하세요 | 요청된 헤더에 매번 전달되며, 이는 요청의 성능에 영향을 미칩니다; 동시에, 요청에 포함되어 있기 때문에 보안 문제에 취약할 수 있습니다 | 참여하지 않음 | 참여하지 않음 | 참여하지 않음 | | 특성 | 문자열 키-값 쌍은 데이터를 로컬에 저장합니다 | 문자열 키-값 쌍은 데이터를 로컬에 저장합니다 | 문자열 키-값 쌍은 데이터를 로컬에 저장합니다 | IndexedDB는 비관계형 데이터베이스로(SQL 문을 통한 연산은 지원되지 않음), 대량의 데이터를 저장하고, 쿼리 인터페이스를 제공하며, 다른 스토리지 솔루션이 제공할 수 없는 인덱스를 구축할 수 있습니다. |
인덱스드 DB
이 글은 주로 IndexedDB를 프론트엔드 저장소로 사용하는 방법을 설명하며, 다음과 같이 소개합니다:
IndexedDB는 클라이언트 측에서 대량의 구조화된 데이터(파일/바이너리 대형 객체(blobs)도 포함)를 저장하는 기본 API입니다. API는 데이터를 고성능으로 검색하기 위해 인덱스를 사용합니다. 웹 스토리지는 소량의 데이터를 저장할 때는 유용하지만, 대량의 구조화된 데이터를 저장하는 것만큼 좋지는 않습니다. IndexedDB는 이러한 상황에 대한 해결책을 제공합니다. 이 페이지는 MDN IndexedDB의 메인 가이드 페이지로, 전체 API 참고 및 사용 가이드, 브라우저 지원 세부사항, 그리고 주요 개념에 대한 설명 링크를 제공합니다.
IndexedDB는 다음과 같은 특징을 가지고 있습니다:
(1) 키-값 쌍 저장. IndexedDB는 데이터를 저장하기 위해 객체 저장소를 사용합니다. 자바스크립트 객체를 포함한 모든 유형의 데이터를 직접 저장할 수 있습니다. 객체 저장소에서는 데이터가 "키-값 쌍" 형태로 저장되며, 각 데이터 레코드는 고유한 기본 키를 가지고 있습니다. 이 키는 고유하여 중복할 수 없으며, 그렇지 않으면 오류가 발생합니다.
(2) 비동기식. IndexedDB는 브라우저를 잠그지 않으며, 사용자는 동기식 동작을 하는 LocalStorage와 달리 다른 작업을 수행할 수 있습니다. 비동기 설계는 대량의 데이터를 읽고 쓰는 것을 방지하여 웹 페이지의 성능을 저하시키는 것입니다.
(3) 지원 업무. IndexedDB는 트랜잭션을 지원하므로, 작업 단계에서 실패하면 전체 트랜잭션이 취소되고 데이터베이스가 트랜잭션 발생 전 상태로 롤링되며, 데이터의 일부만 다시 쓰는 일이 없습니다.
(4) 상동 제한. IndexedDB는 동일한 출처 제한을 받으며, 각 데이터베이스는 그것을 만든 도메인 이름에 대응합니다. 웹 페이지는 자신의 도메인 이름으로만 데이터베이스에 접근할 수 있으며, 크로스 도메인 데이터베이스는 접근할 수 없습니다.
(5) 넓은 저장 공간. IndexedDB는 LocalStorage보다 훨씬 더 넓은 저장 공간을 가지고 있으며, 일반적으로 최소 250MB가 아니며, 상한선이 없습니다.
(6) 이진 저장 지원. IndexedDB는 문자열뿐만 아니라 이진 데이터(ArrayBuffer 객체와 Blob 객체)도 저장할 수 있습니다.
IndexedDB를 직접 시작하는 것이 어렵고 직접 캡슐화해야 한다면, 다음과 같은 패키지 패키지를 사용할 수 있습니다:
- localForage: 클라이언트 측 데이터 저장소에 간단한 값 구문을 제공하는 간단한 폴리필입니다. 백그라운드에서 IndexedDB를 사용하며, IndexedDB를 지원하지 않는 브라우저에서는 WebSQL이나 localStorage로 다시 전환합니다.
- Dexie.js: IndexedDB의 래퍼는 단순한 문법을 통해 더 빠른 코드 개발을 가능하게 합니다.
- ZangoDB: MongoDB와 유사한 IndexedDB 인터페이스로, MongoDB의 익숙한 필터링, 투영, 정렬, 업데이트, 집계 기능을 대부분 지원합니다.
- JsStore: SQL 문법을 사용하는 IndexedDB 래퍼입니다.
- MiniMongo: 클라이언트 메모리에서 제공하는 MongoDB, 로컬 스토리지, http를 통한 서버 동기화. MeteorJS는 MiniMongo를 사용합니다.
- PouchDB: IndexedDB를 사용해 브라우저에서 CouchDB를 구현하는 클라이언트입니다.
- idb: IndexedDB와 비슷한 API를 가진 작은(〜1.15k) 라이브러리이지만, 데이터베이스의 사용성을 크게 향상시키는 약간의 개선이 있습니다.
- idb-keyval: IndexedDB로 구현된 매우 간단하고 작은(~600B) 약속 기반 키-값 쌍 저장입니다.
- sifrr-storage: 매우 작은(~2kB) 약속 기반 클라이언트 측 키-값 데이터베이스입니다. IndexedDB, localStorage, WebSQL, 쿠키를 기반으로 구현되었습니다. 위에서 언급한 지원 데이터베이스를 자동으로 선택하여 우선순위 순서대로 사용할 수 있습니다.
- 러브필드: 러브필드는 자바스크립트로 작성된 웹 앱용 관계형 데이터베이스로, 다양한 브라우저 환경에서 실행될 수 있고, 빠르고 안전하며 사용하기 쉬운 SQL과 유사한 API를 제공합니다.
localForage
localForage는 빠르고 간단한 자바스크립트 저장소입니다. localForage는 비동기 저장소(IndexedDB 또는 WebSQL)와 localStorage와 유사한 간단한 API를 사용하여 웹 애플리케이션의 오프라인 경험을 향상시킵니다. localForage는 IndexedDB나 WebSQL 지원이 없는 브라우저에서 localStorage를 사용합니다.
GitHub 주소:하이퍼링크 로그인이 보입니다.
중국어 튜토리얼:하이퍼링크 로그인이 보입니다.
localForage는 두 가지 다른 js 파일을 제공하며, 차이점은 다음과 같습니다:
localforage.js: 거짓 구현을 포함하는 약속 라이브러리 (하이퍼링크 로그인이 보입니다.), 파일은 비교적 크며, 약속 문법은 구형 브라우저에서도 사용할 수 있습니다.
localforage.nopromises.js: Promise의 구현은 없으며, 오직 새로운 버전의 브라우저만 지원됩니다.
테스트 코드:
(끝)
|
게시됨 2023. 10. 12. 오후 8:42:27
|
|
|
|
집주인|
게시됨 2025. 3. 2. 오후 7:12:18
|
