Gyors, de teljes útmutató az IndexedDB és az adatok böngészőkben történő tárolásához

Szeretne tanulni JavaScriptet? Töltse le JavaScript e-könyvemet a jshandbook.com címen

Bevezetés az IndexedDB-be

Az IndexedDB az egyik tárolási lehetőség, amelyet az évek során a böngészőkbe vezettek be.

Ez egy kulcs / érték tároló (noSQL adatbázis), amelyet a böngészőkben tárolt adatok végleges megoldásának tekintenek .

Ez egy aszinkron API, ami azt jelenti, hogy a költséges műveletek végrehajtása nem fogja blokkolni a felhasználói felület szálát, amely hanyag élményt nyújt a felhasználók számára. Határozatlan mennyiségű adatot képes tárolni, bár egy bizonyos küszöbérték túllépése esetén a felhasználót arra kérik, hogy adjon magasabb korlátokat a webhelynek.

Minden modern böngészőben támogatott.

Támogatja a tranzakciókat, a verziókat és jó teljesítményt nyújt.

A böngészőben a következőket is használhatjuk:

  • Cookie-k : nagyon kis mennyiségű húr tárolható
  • Web Storage (vagy DOM Storage), egy kifejezés, amely általában azonosítja a localStorage és a sessionStorage, két kulcs / érték tárolót. sessionStorage, nem őrzi meg az adatokat, amelyek törlődnek a munkamenet befejezésekor, míg a localStorage az adatokat a munkamenetek során tartja

A helyi / munkamenet-tárolás hátránya, hogy kis (és inkonzisztens) méretre van korlátozva, a böngészők megvalósítása 2 MB-tól 10 MB-ig terjedő helyet kínál webhelyenként.

Korábban Web SQL is volt , egy csomag az SQLite körül, de most ez már elavult és nem támogatott néhány modern böngészőben, soha nem volt elismert szabvány, ezért nem szabad használni, bár a felhasználók 83% -ának van ilyen technológiája eszközöket használhatom.

Míg technikailag több adatbázist hozhat létre webhelyenként, általában egyetlen adatbázist hoz létre , és ezen belül több objektumtárolót is létrehozhat .

Az adatbázis egy domainhez privát , így bármely más webhely nem férhet hozzá egy másik webhelyhez az IndexedDB áruházakhoz.

Minden üzlet általában egy sor dolgot tartalmaz , amelyek lehetnek

  • húrok
  • számok
  • tárgyakat
  • tömbök
  • dátumokat

Például lehet, hogy van egy üzlete, amely bejegyzéseket tartalmaz, egy másik pedig megjegyzéseket tartalmaz.

A bolt számos olyan elemet tartalmaz, amelyek egyedi kulccsal rendelkeznek, amely az objektum azonosításának módját képviseli.

Ezeket a boltokat tranzakciók segítségével módosíthatja hozzáadás, szerkesztés és törlés műveletek végrehajtásával, valamint az azokban található elemek iterálásával.

Az Promises megjelenése az ES6-ban és az API-k későbbi ígéretek felhasználására való áttérése óta az IndexedDB API kissé régi iskolának tűnik .

Bár nincs semmi baj, az összes példában, amelyet elmagyarázok, az IndexedDB Promised Library by Jake Archibald-t fogom használni, amely egy apró réteg az IndexedDB API tetején, hogy megkönnyítse a használatát.

Ezt a könyvtárat a Google Developers webhelyének az IndexedDB-vel kapcsolatos összes példáján is felhasználják

Hozzon létre egy IndexedDB adatbázist

A legegyszerűbb módszer az unpkg használata , ha ezt hozzáadja az oldal fejlécéhez:

 import { openDB, deleteDB } from '//unpkg.com/idb?module'  

Az IndexedDB API használata előtt mindig ellenőrizze a böngésző támogatását, annak ellenére, hogy széles körben elérhető, soha nem tudhatja, hogy a felhasználó melyik böngészőt használja:

(() => { 'use strict' if (!('indexedDB' in window)) { console.warn('IndexedDB not supported') return } //...IndexedDB code })() 

Hogyan hozzunk létre adatbázist

Használata openDB():

(async () => { //... const dbName = 'mydbname' const storeName = 'store1' const version = 1 //versions start at 1 const db = await openDB(dbName, version, { upgrade(db, oldVersion, newVersion, transaction) { const store = db.createObjectStore(storeName) } }) })() 

Az első 2 paraméter az adatbázis neve és a verson. A harmadik param, amely opcionális, egy olyan objektum, amely csak akkor hív függvényt , ha a verziószám magasabb, mint a jelenlegi telepített adatbázis-verzió . A függvénytörzsben frissítheti a db szerkezetét (tárolókat és indexeket).

Adatok hozzáadása egy üzlethez

Adatok hozzáadása az áruház létrehozásakor, inicializálás

Használja az putobjektumtár módszerét, de előbb szükségünk van rá egy hivatkozásra, amelyet db.createObjectStore()létrehozásakor kaphatunk .

Használatakor putaz érték az első argumentum, a kulcs a második. Ennek az az oka, hogy keyPathha az objektumtár létrehozásakor ad meg , akkor nem kell minden put () kéréshez megadnia a kulcs nevét, csak beírhatja az értéket.

Ez feltöltődik store0, amint létrehozzuk:

(async () => { //... const dbName = 'mydbname' const storeName = 'store0' const version = 1 const db = await openDB(dbName, version,{ upgrade(db, oldVersion, newVersion, transaction) { const store = db.createObjectStore(storeName) store.put('Hello world!', 'Hello') } }) })() 

Adatok hozzáadása, amikor a bolt már létre van hozva, tranzakciók segítségével

Elemek későbbi hozzáadásához létre kell hoznia egy olvasási / írási tranzakciót , amely biztosítja az adatbázis integritását (ha egy művelet nem sikerül, a tranzakció összes művelete visszagördül, és az állapot visszatér egy ismert állapotba).

Ehhez használjon hivatkozást arra az dbPromiseobjektumra, amelyet híváskor kaptunk openDB, és futtassa:

(async () => { //... const dbName = 'mydbname' const storeName = 'store0' const version = 1 const db = await openDB(/* ... */) const tx = db.transaction(storeName, 'readwrite') const store = await tx.objectStore(storeName) const val = 'hey!' const key = 'Hello again' const value = await store.put(val, key) await tx.done })() 

Adatok beszerzése egy boltból

Egy tétel beszerzése az üzletből: get()

const key = 'Hello again' const item = await db.transaction(storeName).objectStore(storeName).get(key) 

Az összes elem beszerzése az üzletből: getAll()

Tárolja az összes kulcsot

const items = await db.transaction(storeName).objectStore(storeName).getAllKeys() 

Az összes érték tárolása

const items = await db.transaction(storeName).objectStore(storeName).getAll() 

Adatok törlése az IndexedDB-ből

Az adatbázis, az objektumtár és az adatok törlése

Töröljön egy teljes IndexedDB adatbázist

const dbName = 'mydbname' await deleteDB(dbName) 

Adatok törlése egy objektumtárból

Tranzakciót használunk:

(async () => { //... const dbName = 'mydbname' const storeName = 'store1' const version = 1 const db = await openDB(dbName, version, { upgrade(db, oldVersion, newVersion, transaction) { const store = db.createObjectStore(storeName) } }) const tx = await db.transaction(storeName, 'readwrite') const store = await tx.objectStore(storeName) const key = 'Hello again' await store.delete(key) await tx.done })() 

Áthelyezés az adatbázis előző verziójáról

The third (optional) parameter of the openDB() function is an object that can contain an upgrade function called only if the version number is higher than the current installed database version. In that function body you can upgrade the structure (stores and indexes) of the db:

const name = 'mydbname' const version = 1 openDB(name, version, { upgrade(db, oldVersion, newVersion, transaction) { console.log(oldVersion) } }) 

In this callback, you can check from which version the user is updating, and perform some operations accordingly.

You can perform a migration from a previous database version using this syntax

(async () => { //... const dbName = 'mydbname' const storeName = 'store0' const version = 1 const db = await openDB(dbName, version, { upgrade(db, oldVersion, newVersion, transaction) { switch (oldVersion) { case 0: // no db created before // a store introduced in version 1 db.createObjectStore('store1') case 1: // a new store in version 2 db.createObjectStore('store2', { keyPath: 'name' }) } db.createObjectStore(storeName) } }) })() 

Unique keys

createObjectStore() as you can see in case 1 accepts a second parameter that indicates the index key of the database. This is very useful when you store objects: put() calls don't need a second parameter, but can just take the value (an object) and the key will be mapped to the object property that has that name.

The index gives you a way to retrieve a value later by that specific key, and it must be unique (every item must have a different key)

A key can be set to auto increment, so you don't need to keep track of it on the client code:

db.createObjectStore('notes', { autoIncrement: true }) 

Use auto increment if your values do not contain a unique key already (for example, if you collect email addresses without an associated name).

Check if a store exists

You can check if an object store already exists by calling the objectStoreNames() method:

const storeName = 'store1' if (!db.objectStoreNames.contains(storeName)) { db.createObjectStore(storeName) } 

Deleting from IndexedDB

Deleting the database, an object store and data

Delete a database

await deleteDB('mydb') 

Delete an object store

An object store can only be deleted in the callback when opening a db, and that callback is only called if you specify a version higher than the one currently installed:

const db = await openDB('dogsdb', 2, { upgrade(db, oldVersion, newVersion, transaction) { switch (oldVersion) { case 0: // no db created before // a store introduced in version 1 db.createObjectStore('store1') case 1: // delete the old store in version 2, create a new one db.deleteObjectStore('store1') db.createObjectStore('store2') } } }) 

To delete data in an object store use a transaction

const key = 232 //a random key const db = await openDB(/*...*/) const tx = await db.transaction('store', 'readwrite') const store = await tx.objectStore('store') await store.delete(key) await tx.complete 

There's more!

Ezek csak az alapok. Nem beszéltem a kurzorokról és a fejlettebb dolgokról. Még több van az IndexedDB-nél, de remélem, ez előnyt jelent Önnek.

Szeretne tanulni JavaScriptet? Töltse le JavaScript könyvemet a jshandbook.com címen