浏览器快捷键指南_快速但完整的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