IndexedDB에 대해 설명했습니다.

이전 기사에서는 IndexedDB의 래퍼인 Dexie에 대해 논의했습니다. 이 기사에서는 IndexedDB에 대해 설명합니다. 브라우저에 정보를 저장하는 데 일반적으로 사용되는 이 localStorage API에 대해 잘 알고 있어야 합니다. 마찬가지로 IndexedDB는 클라이언트측 저장소로 사용됩니다.

IndexedDB란 무엇인가요?

MDN 문서 설명:

IndexedDB는 파일/BLOB을 포함하여 상당한 양의 구조화된 데이터를 클라이언트 측에 저장하기 위한 하위 수준 API입니다. 이 API는 인덱스를 사용하여 이 데이터에 대한 고성능 검색을 가능하게 합니다. 웹 스토리지는 적은 양의 데이터를 저장하는 데 유용하지만, 대량의 구조화된 데이터를 저장하는 데는 유용하지 않습니다.

IndexedDB가 솔루션을 제공합니다. 이것은 MDN의 IndexedDB 적용 범위에 대한 기본 랜딩 페이지입니다. 여기에서는 전체 API 참조 및 사용 가이드, 브라우저 지원 세부 사항 및 주요 개념에 대한 일부 설명에 대한 링크를 제공합니다.

예시 저장소:

MDN은 Github 저장소 예시와 script/todo.js를 제공합니다.

window.onload를 사용하여 스크립트가 초기화됩니다

window.onload = () => {
}

데이터베이스에 대한 요청 열기:

// Let us open our database
const DBOpenRequest = window.indexedDB.open('toDoList', 4);

연결 오류:

// Register two event handlers to act on the database being opened successfully, or not
DBOpenRequest.onerror = (event) => {
 note.appendChild(createListItem('Error loading database.'));
};

데이터베이스 연결 성공 시:

DBOpenRequest.onsuccess = (event) => {
 note.appendChild(createListItem('Database initialised.'));
// Store the result of opening the database in the db variable. This is used a lot below
 db = DBOpenRequest.result;
// Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB
 displayData();
};

데이터 추가

// Open a read/write DB transaction, ready for adding the data
const transaction = db.transaction(['toDoList'], 'readwrite');
// Call an object store that's already been added to the database
const objectStore = transaction.objectStore('toDoList');
// Make a request to add our newItem object to the object store
const objectStoreRequest = objectStore.add(newItem[0]);
objectStoreRequest.onsuccess = (event) => {
 // process data on success.
}
// Report on the success of the transaction completing, when everything is done
transaction.oncomplete = () => {
 note.appendChild(createListItem('Transaction completed: database modification finished.'));
// Update the display of data to show the newly added item, by running displayData() again.
 displayData();
};
// Handler for any unexpected error
transaction.onerror = () => {
 note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`));
};

관찰: localStorage와 IndexedDB

이제 레코드를 추가하는 데 필요한 코드가 많고 onerror 및 onsuccess와 같은 비동기 콜백이 있다는 것을 깨달았을 것입니다. 이 스택 교환 답변에서 이를 지적하고 있습니다.

이 IndexedDB 처리를 단순화하기 위해 Dexie를 사용할 수 있습니다.

Dexie로 데이터 추가:

export function AddFriendForm({ defaultAge } = { defaultAge: 21 }) {
 const [name, setName] = useState('');
 const [age, setAge] = useState(defaultAge);
 const [status, setStatus] = useState('');
async function addFriend() {
 try {
 // Add the new friend!
 const id = await db.friends.add({
 name,
 age
 });
setStatus(`Friend ${name} successfully added. Got id ${id}`);
 setName('');
 setAge(defaultAge);
 } catch (error) {
 setStatus(`Failed to add ${name}: ${error}`);
 }
 }
return (
 <>
 <p>{status}</p>
 Name:
 <input
 type="text"
 value={name}
 onChange={(ev) => setName(ev.target.value)}
 />
 Age:
 <input
 type="number"
 value={age}
 onChange={(ev) => setAge(Number(ev.target.value))}
 />
 <button onClick={addFriend}>Add</button>
 </>
 );
}

이 래퍼 API는 Prisma 및 Drizzle과 같은 ORM을 생각나게 합니다.

회사 소개:

Thinkthroo에서는 대규모 오픈소스 프로젝트를 연구하고 아키텍처 가이드를 제공합니다. 우리는 귀하의 프로젝트에서 사용할 수 있는 tailwind로 구축된 resubale 구성 요소를 개발했습니다. Next.js, React, Node 개발 서비스를 제공합니다.

귀하의 프로젝트에 대해 논의하려면 회의를 예약하세요.

참고자료:

1. https://www.reddit.com/r/sveltejs/comments/15rj12h/any_downsides_to_using_indexeddb_vs_localstorage/

2. https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

3. https://github.com/mdn/dom-examples/tree/main/to-do-notifications

4. https://softwareengineering.stackexchange.com/questions/219953/how-is-localstorage-다른-from-indexeddb

위 내용은 IndexedDB에 대해 설명했습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!