diff --git a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md index b066fae9056e56..ce17fdaafacff0 100644 --- a/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md +++ b/files/zh-cn/learn/javascript/client-side_web_apis/client-side_storage/index.md @@ -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` 。你现在可以开始向其添加代码了。 @@ -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`(包含音符的正文)。 @@ -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()` 函数以更新页面上的笔记显示。 ### 显示数据 @@ -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 片段,用记录中的数据填充它,然后将其插入页面(`