Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
  • Loading branch information
yin1999 authored Aug 24, 2024
1 parent 053bb41 commit f259e2e
Showing 1 changed file with 6 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -265,7 +265,7 @@ web storage 的一个关键特性是,数据在不同页面加载时都存在

1、首先,将 [`index.html`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/style.css), 和 [`index-start.js`](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/indexeddb/notes/index-start.js) 文件的本地副本放入本地计算机上的新目录中。

2、浏览这些文件。你将看到 HTML 非常简单:具有页眉和页脚的网站,以及包含显示笔记的位置的主内容区域,以及用于在数据库中输入新笔记的表单。CSS 提供了一些简单的样式,使其更清晰。JavaScript 文件包含五个声明的常量,其中包含对将显示笔记的 {{htmlelement("ul")}} 元素的引用,标题和正文 {{htmlelement("input")}} 元素,{{htmlelement("form")}}本身,以及{{htmlelement("button")}}。
2、浏览这些文件。你将看到 HTML 非常简单:具有页眉和页脚的网站,以及包含显示笔记的位置的主内容区域,以及用于在数据库中输入新笔记的表单。CSS 提供了一些简单的样式,使其更清晰。JavaScript 文件包含五个声明的常量,其中包含对将显示笔记的 {{htmlelement("ul")}} 元素的引用,标题和正文 {{htmlelement("input")}} 元素,{{htmlelement("form")}} 本身,以及{{htmlelement("button")}}。

3、将你的 JavaScript 文件重命名为 `index.js` 。你现在可以开始向其添加代码了。

Expand Down Expand Up @@ -354,7 +354,7 @@ web storage 的一个关键特性是,数据在不同页面加载时都存在

这是我们定义数据库的模式(结构)的地方; 也就是说,它包含的列(或字段)集。这里我们首先从`e.target.result`(事件目标的`result`属性)中获取对现有数据库的引用,该引用是`request`对象。这相当于处理程序`db = request.result;`内部的行`onsuccess`,但我们需要在此单独执行此操作,因为`onupgradeneeded`处理程序(如果需要)将在`onsuccess`处理程序之前运行,这意味着`db`如果我们不这样做,该值将不可用。

然后[`IDBDatabase.createObjectStore()`](/zh-CN/docs/Web/API/IDBDatabase/createObjectStore),我们使用在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们将其命名为`notes`,并且还指定了一个`autoIncrement`名为的关键字段`id`- 在每个新记录中,这将自动赋予增量值 - 开发人员不需要明确地设置它。作为密钥,`id`字段将用于唯一标识记录,例如删除或显示记录时。
然后,我们使用 [`IDBDatabase.createObjectStore()`](/zh-CN/docs/Web/API/IDBDatabase/createObjectStore) 在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们将其命名为 notes,并且还指定了一个名为 `id``autoIncrement` 关键字段——在每个新记录中,这将自动赋予增量值——开发人员不需要明确地设置它。作为密钥,`id` 字段将用于唯一标识记录,例如删除或显示记录时。

我们还使用以下[`IDBObjectStore.createIndex()`](/zh-CN/docs/Web/API/IDBObjectStore/createIndex)方法创建另外两个索引(字段):( `title`每个音符将包含一个标题),以及`body`(包含音符的正文)。

Expand Down Expand Up @@ -425,7 +425,7 @@ function addData(e) {
- 使用 {{domxref("IDBDatabase.transaction()")}} 方法打开 `notes` 对象存储的 `readwrite` 事务。此事务对象允许我们访问对象存储,以便我们可以对其执行某些操作,例如添加新记录。
- 使用 {{domxref("IDBTransaction.objectStore()")}} 方法访问对象库,将结果保存在 `objectStore` 变量中。
- 使用 {{domxref("IDBObjectStore.add()")}} 添加新记录到数据库。这创建了一个请求对象,与我们之前看到的方式相同。
- 在生命周期的关键点为 `request` 以及 `transaction` 对象添加事件处理程序以运行代码。请求成功后,我们会清除表单输入,以便输入下一个笔记。交易完成后,我们 `displayData()` 再次运行该功能以更新页面上的笔记显示
- 在生命周期的关键点为 `request` 以及 `transaction` 对象添加事件处理程序以运行代码。请求成功后,我们会清除表单输入,以便输入下一个笔记。交易完成后,我们再次运行 `displayData()` 函数以更新页面上的笔记显示

### 显示数据

Expand Down Expand Up @@ -498,9 +498,9 @@ function displayData() {
- 接下来,我们`notes`使用[`IDBDatabase.transaction()`](/zh-CN/docs/Web/API/IDBDatabase/transaction)和[`IDBTransaction.objectStore()`](/zh-CN/docs/Web/API/IDBTransaction/objectStore)我们一样得到对象存储的引用`addData()`,除了这里我们将它们链接在一行中。
- 下一步是使用[`IDBObjectStore.openCursor()`](/zh-CN/docs/Web/API/IDBObjectStore/openCursor)方法打开对游标的请求 - 这是一个可用于迭代对象存储中的记录的构造。我们将一个`onsuccess`处理程序链接到该行的末尾以使代码更简洁 - 当成功返回游标时,运行处理程序。
- 我们[`IDBCursor`](/zh-CN/docs/Web/API/IDBCursor)使用 let 获取对游标本身(对象)的引用`cursor = e.target.result`
- 接下来,我们检查光标是否包含来自数据存储区(`if(cursor){ ... }`)的记录 - 如果是这样,我们创建一个 DOM 片段,用记录中的数据填充它,然后将其插入页面(`<ul>`元素内部)。我们还包括一个删除按钮,当单击该按钮时,将通过运行该`deleteItem()`功能删除该笔记,我们将在下一节中查看。
- 接下来,我们检查光标是否包含来自数据存储区(`if(cursor){ ... }`)的记录——如果包含,我们创建一个 DOM 片段,用记录中的数据填充它,然后将其插入页面(`<ul>`元素内部)。我们还包括一个删除按钮,当单击该按钮时,将通过运行 `deleteItem()` 函数删除该笔记(我们将在下一节中查看
-`if`块结束时,我们使用该[`IDBCursor.continue()`](/zh-CN/docs/Web/API/IDBCursor/continue)方法将光标前进到数据存储区中的下一条记录,然后`if`再次运行块的内容。如果有另一个要迭代的记录,这会导致它被插入到页面中,然后`continue()`再次运行,依此类推。
- 当没有更多记录要迭代时,`cursor`将返回`undefined`,因此`else`块将运行而不是`if`。此块检查是否有任何笔记被插入`<ul>`- 如果没有,它会插入一条消息,说没有存储笔记
- 当没有更多记录要迭代时,`cursor` 将返回 `undefined`,因此 `else` 块将运行(而不是 `if` 块)。此块检查是否有任何笔记被插入`<ul>`——如果没有,它会插入一条消息,说没有存储的笔记

### 删除一条笔记

Expand Down Expand Up @@ -538,7 +538,7 @@ function deleteItem(e) {

- 第一部分可以使用一些解释 - 我们检索要删除`Number(e.target.parentNode.getAttribute('data-note-id'))`的记录的 ID - 回想一下记录的 ID 是在第一次显示时保存在`data-note-id`属性中的`<li>`。但是,我们需要通过全局内置的[Number()](/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number)对象传递属性,因为它当前是一个字符串,否则将无法被数据库识别。
- 然后,我们使用我们之前看到的相同模式获取对对象存储的引用,并使用该[`IDBObjectStore.delete()`](/zh-CN/docs/Web/API/IDBObjectStore/delete)方法从数据库中删除记录,并将 ID 传递给它。
- 当数据库事务完成后,我们`<li>`DOM 中删除笔记,然后再次检查以查看它是否`<ul>`为空,并根据需要插入笔记。
- 当数据库事务完成后,我们从 DOM 中删除笔记的 `<li>`,然后再次检查以查看 `<ul>` 是否为空,并根据需要插入笔记。

就是这样了!你的例子现在应该有效。

Expand Down

0 comments on commit f259e2e

Please sign in to comment.