๐ค IndexedDB API์ ๋ํด ์ ๋ฆฌํ ๊ธ์ ๋๋ค.
IndexedDB๋ ๋ง์ ์์ ๊ตฌ์กฐํ๋ ๋ฐ์ดํฐ๋ฅผ ํด๋ ์ด์ธํธ์ ์ ์ฅํ๊ธฐ ์ํ ํด๋ผ์ด์ธํธ ์คํ ๋ฆฌ์ง์ด๋ค.
localStorage, cookies, indexedDB๊ฐ ํด๋ผ์ด์ธํธ ์คํ ๋ฆฌ์ง์ ์ํ๋ค.
IndexedDB๋ฅผ ๊ฐ์ ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
IDB ๊ณต์Github
openDB
๋ฐ์ดํฐ๋ฒ ์ด์ค๋ฅผ ์ฌ๋ ๋ฉ์๋๋ก, ํฅ์๋ IDBDatabase
๋ฅผ ์ํ promise๋ฅผ ๋ฐํํ๋ค.
onst db = await openDB(name, version, {
upgrade(db, oldVersion, newVersion, transaction) {
// โฆ
},
blocked() {
// โฆ
},
blocking() {
// โฆ
},
terminated() {
// โฆ
},
});
name
: ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ด๋ฆversion
(optional) : ์คํค๋ง ๋ฒ์ , ํ์ฌ ๋ฒ์ ์ ์ด๋ ค๋ฉด undefined๋ก ์ค์ upgrade
(optional) : ๊ณผ๊ฑฐ์ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ํด๋น ๋ฒ์ ์ด ์ด๋ฆฐ ์ ์๋ค๋ฉด ํธ์ถ๋๋ค. IndexDB์ upgradeneeded event(ํ์ฌ ๋ฒ์ ๋ณด๋ค ๋์ ๋ฒ์ ์ ์คํํ ๋ ํธ์ถ๋จ)์ ์ ์ฌํ๋ค.blocked
(optional) : ๊ธฐ์กด๋ณด๋ค ๋ ์ค๋๋ ๋ฒ์ ์ด ์์ ๋ ํธ์ถ๋์ด ์ค๋๋ ๋ฒ์ ์ ๋์ด์ ์ด๋ฆฌ์ง ์๋๋ค. blocking
(optional) : ๋ง์ฝ ์ฐ๊ฒฐ์ด ๋ฏธ๋ ์์ ๋ฒ์ ์ DB๊ฐ ์ด๋ฆฌ๋ ๊ฒ์ ๋ง์ ๊ฐ๋ฅ์ฑ์ด ์๋ค๋ฉด ํธ์ถ๋๋ค. terminated
(optional) : db.close()
์ ๊ฐ์ ์ผ๋ฐ์ ์ธ ๋๊น์ด ์๋, ๋ธ๋ผ์ฐ์ ๊ฐ ๋น์ด์์ ์ผ๋ก ์ฐ๊ฒฐ์ ๋๋ผ๋ ํธ์ถ๋๋ค.DBSchema
๋ฅผ extendsํ๋ค.indexes
๋ ์ธ๋ฑ์ค ์ด๋ฆ๋ค์ ๋งคํํ ์งํฉ์ฒด์ด๋ค. import { openDB, DBSchema } from 'idb';
interface MyDB extends DBSchema {
'favourite-number': {
key: string;
value: number;
};
products: {
value: {
name: string;
price: number;
productCode: string;
};
key: string;
indexes: { 'by-price': number };
};
}
async function demo() {
const db = await openDB<MyDB>('my-db', 1, {
upgrade(db) {
// ๊ฐ์ฒดํ ์ ์ฅ์๋ฅผ ๋ง๋ ๋ค
db.createObjectStore('favourite-number');
const productStore = db.createObjectStore('products', {
// ๊ฐ์ฒด์ prodcutCode๋ฅผ key๋ก ์ง์
keyPath: 'productCode',
});
// ๊ฐ์ฒด์ 'by-price'์ ์ธ๋ฑ์ค ์์ฑ
productStore.createIndex('by-price', 'price');
},
});
// ํ์
์ ๋ง์ผ๋ฏ๋ก ์๋ํ๋ค.
await db.put('favourite-number', 7, 'Jen');
// ์ปดํ์ผ ์๋ฌ๊ฐ ๋ฐ์ํ๋ค. 'favourtie-number' store๋ ์ซ์ํ์
์ ์์ํ๊ธฐ ๋๋ฌธ์ด๋ค.
await db.put('favourite-number', 'Twelve', 'Jake');
}