Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[zh-cn]: fix errors in translations #23226

Merged
merged 5 commits into from
Aug 24, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -253,19 +253,19 @@ web storage 的一个关键特性是,数据在不同页面加载时都存在

### 通过一个笔记存储示例演示

在这里,我们将向你介绍一个示例,该示例允许你在浏览器中存储笔记并随时查看和删除它们,在我们进行时,我们将解释 IDB 的最基本部分并让你自己构建注释
在这里,我们将向你介绍一个示例,该示例允许你在浏览器中存储笔记并随时查看和删除它们,在我们进行时,我们将解释 IDB 的最基本部分并让你自己构建笔记

这个应用看起来像这样:

![](idb-demo.png)

每个笔记都有一个标题和一些正文,每个都可以单独编辑。我们将在下面通过的 JavaScript 代码提供详细的注释,以帮助你了解正在发生的事情。
每个笔记都有一个标题和一些正文,每个都可以单独编辑。我们将在下面通过的 JavaScript 代码提供详细的笔记,以帮助你了解正在发生的事情。

### 开始

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),我们使用在打开的数据库中创建一个新的对象库。这相当于传统数据库系统中的单个表。我们给它起了名称注释,并且还指定了一个`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