瀏覽器快捷鍵指南_快速但完整的IndexedDB指南以及在瀏覽器中存儲數據

瀏覽器快捷鍵指南

Interested in learning JavaScript? Get my JavaScript ebook at jshandbook.com
有興趣學習JavaScript嗎？在jshandbook.com上獲取我JavaScript電子書

IndexedDB簡介 (Introduction to IndexedDB)

IndexedDB is one of the storage capabilities introduced into browsers over the years. It's a key/value store (a noSQL database) considered to be the definitive solution for storing data in browsers.

IndexedDB是多年來瀏覽器引入的存儲功能之一。它是鍵/值存儲(noSQL數據庫)，被認為是在瀏覽器中存儲數據的最終解決方案 。

It's an asynchronous API, which means that performing costly operations won't block the UI thread providing a sloppy experience to users. It can store an indefinite amount of data, although once over a certain threshold the user is prompted to give the site higher limits.

這是一個異步API，這意味著執行昂貴的操作不會阻止UI線程，從而為用戶提供草率的體驗。它可以存儲無限量的數據，盡管一旦超過某個閾值，系統會提示用戶為站點提供更高的限制。

It's supported on all modern browsers.

所有現代瀏覽器均支持該功能。

It supports transactions, versioning and gives good performance.

它支持事務，版本控制并提供良好的性能。

Inside the browser we can also use:

在瀏覽器內部，我們還可以使用：

Cookies: can host a very small amount of strings
Cookies ：可以容納很少量的字符串
Web Storage (or DOM Storage), a term that commonly identifies localStorage and sessionStorage, two key/value stores. sessionStorage, does not retain data, which is cleared when the session ends, while localStorage keeps the data across sessions
Web存儲 (或DOM存儲)，一個通常標識localStorage和sessionStorage這兩個鍵/值存儲的術語。 sessionStorage不保留數據，該數據在會話結束時被清除，而localStorage在會話之間保留數據

Local/session storage have the disadvantage of being capped at a small (and inconsistent) size, with browsers implementation offering from 2MB to 10MB of space per site.

本地/會話存儲的缺點是限制在較小(且不一致)的大小，每個站點的瀏覽器實現提供2MB到10MB的空間。

In the past we also had Web SQL, a wrapper around SQLite, but now this is deprecated and unsupported on some modern browsers, it's never been a recognized standard and so it should not be used, although 83% of users have this technology on their devices according to Can I Use.

過去我們也有Web SQL ，它是圍繞SQLite的包裝，但是現在已經不推薦使用，并且在某些現代瀏覽器中不支持此包裝，盡管它有83％的用戶在其上使用了此技術，但它從未被公認是標準，因此不應該使用它。根據我可以使用的設備。

While you can technically create multiple databases per site, you generally create one single database, and inside that database you can create multiple object stores.

從技術上講，每個站點可以創建多個數據庫，但是通常可以創建一個數據庫 ，并且可以在該數據庫內部創建多個對象存儲 。

A database is private to a domain, so any other site cannot access another website IndexedDB stores.

數據庫是域專用的 ，因此任何其他站點都無法訪問其他網站IndexedDB存儲。

Each store usually contains a set of things, which can be

每個商店通常包含一組東西，可以是

strings
弦
numbers
數字
objects
對象
arrays
數組
dates
日期

For example you might have a store that contains posts, another that contains comments.

例如，您可能有一個包含帖子的商店，另一個包含評論的商店。

A store contains a number of items which have a unique key, which represents the way by which an object can be identified.

商店包含許多具有唯一密鑰的項目，該唯一密鑰表示識別對象的方式。

You can alter those stores using transactions, by performing add, edit and delete operations, and iterating over the items they contain.

您可以通過執行添加，編輯和刪除操作，以及遍歷它們包含的項目來使用事務來更改這些商店。

Since the advent of Promises in ES6, and the subsequent move of APIs to using promises, the IndexedDB API seems a bit old school.

自從ES6中Promises的問世以及API后來轉向使用Promise以來，IndexedDB API似乎有點老套了 。

While there's nothing wrong in it, in all the examples that I'll explain I'll use the IndexedDB Promised Library by Jake Archibald, which is a tiny layer on top of the IndexedDB API to make it easier to use.

盡管沒有什么錯，但在所有要解釋的示例中，我將使用Jake Archibald 編寫的IndexedDB Promised Library ，它是IndexedDB API之上的一小層，使它易于使用。

This library is also used on all the examples on the Google Developers website regarding IndexedDB

該庫還用于Google Developers網站上有關IndexedDB的所有示例中

創建一個IndexedDB數據庫 (Create an IndexedDB Database)

The simplest way is to use unpkg, by adding this to the page header:

最簡單的方法是使用unpkg ，方法是將其添加到頁面標題中：

<script type="module">
import { openDB, deleteDB } from 'https://unpkg.com/idb?module'
</script>

Before using the IndexedDB API, always make sure you check for support in the browser, even though it's widely available, you never know which browser the user is using:

在使用IndexedDB API之前，請務必確保檢查瀏覽器是否提供支持，即使該支持廣泛可用，也永遠不會知道用戶使用的是哪種瀏覽器：

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

如何建立資料庫 (How to create a database)

Using openDB():

使用openDB() ：

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

The first 2 parameters are the database name, and the verson. The third param, which is optional, is an object that contains a function called only if the version number is higher than the current installed database version. In the function body you can upgrade the structure (stores and indexes) of the db.

前兩個參數是數據庫名稱和版本。第三個參數是可選的，它是一個對象，其中包含僅當版本號高于當前已安裝的數據庫版本時才調用的函數。在功能主體中，您可以升級數據庫的結構(存儲和索引)。

將數據添加到存儲中 (Adding data into a store)

創建商店時添加數據，對其進行初始化 (Adding data when the store is created, initializing it)

You use the put method of the object store, but first we need a reference to it, which we can get from db.createObjectStore() when we create it.

您使用對象存儲的put方法，但是首先我們需要對其進行引用，我們可以在創建它時從db.createObjectStore()獲取它。

When using put, the value is the first argument, the key is the second. This is because if you specify keyPath when creating the object store, you don't need to enter the key name on every put() request, you can just write the value.

使用put ，值是第一個參數，鍵是第二個參數。這是因為，如果在創建對象存儲庫時指定keyPath ，則無需在每個put()請求中都輸入鍵名，只需編寫該值即可。

This populates store0 as soon as we create it:

我們創建后立即填充store0 ：

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

使用事務在創建商店后添加數據 (Adding data when the store is already created, using transactions)

To add items later down the road, you need to create a read/write transaction, that ensures database integrity (if an operation fails, all the operations in the transaction are rolled back and the state goes back to a known state).

要在以后添加項目，您需要創建一個讀/寫事務，以確保數據庫完整性(如果操作失敗，則事務中的所有操作都會回滾，并且狀態返回到已知狀態)。

For that, use a reference to the dbPromise object we got when calling openDB, and run:

為此，請使用對調用openDB時獲得的dbPromise對象的引用，然后運行：

(async () => {//...const dbName = 'mydbname'const storeName = 'store0'const version = 1const 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
})()

從商店獲取數據 (Getting data from a store)

從商店獲取一件商品： `get()` (Getting one item from a store: `get()`)

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

從商店獲取所有商品： `getAll()` (Getting all the items from a store: `getAll()`)

Get all the keys stored

獲取所有存儲的密鑰

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

Get all the values stored

獲取所有存儲的值

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

從IndexedDB刪除數據 (Deleting data from IndexedDB)

Deleting the database, an object store and data

刪除數據庫，對象存儲和數據

刪除整個IndexedDB數據庫 (Delete an entire IndexedDB database)

const dbName = 'mydbname'
await deleteDB(dbName)

刪除對象存儲中的數據 (To delete data in an object store)

We use a transaction:

我們使用一筆交易：

(async () => {//...const dbName = 'mydbname'const storeName = 'store1'const version = 1const 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
})()

從先前版本的數據庫遷移 (Migrate from previous version of a database)

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:

openDB()函數的第三個(可選)參數是一個對象，該對象可以包含僅當版本號高于當前已安裝的數據庫版本時才調用的upgrade函數。在該函數體中，您可以升級數據庫的結構(存儲和索引)：

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 = 1const db = await openDB(dbName, version, {upgrade(db, oldVersion, newVersion, transaction) {switch (oldVersion) {case 0: // no db created before// a store introduced in version 1db.createObjectStore('store1')case 1:// a new store in version 2db.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.

如case 1所示， createObjectStore()接受第二個參數，該參數指示數據庫的索引鍵。這在存儲對象時非常有用： put()調用不需要第二個參數，而只需獲取值(一個對象)，并且鍵將映射到具有該名稱的對象屬性。

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:

您可以通過調用objectStoreNames()方法來檢查對象存儲是否已存在：

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

從IndexedDB刪除 (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 1db.createObjectStore('store1')case 1:// delete the old store in version 2, create a new onedb.deleteObjectStore('store1')db.createObjectStore('store2')}}
})

要刪除對象存儲中的數據，請使用事務 (To delete data in an object store use a transaction)

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