本地存储对象

在上一节中，我们涵盖了 storage（存储） 的所有理论部分。我们快速浏览了 storage 的所有方法，我们将在其中使用这些方法。因此，在本节中，我们将学习如何在 PhoneGap 中创建和使用 本地存储对象。以下是创建和使用本地存储对象的逐步过程。

1) 创建一个新项目

首先，我们将使用空白模板创建一个新的 PhoneGap 项目。如果您不知道如何使用空白模板创建应用程序，请浏览 PhoneGap 项目链接。

创建 PhoneGap 项目后，我们将打开其 index.html 文件，该文件位于 www 文件夹中。

2) 添加 JQuery mobile 库

创建项目后，我们将添加 JQuery mobile 库，就像我们在之前的示例中添加的那样。我们将转到 JQuery，并在那里复制三行代码，即 CDN 托管文件。我们将把这段代码粘贴到我们的 index.html 文件中，并按以下方式更改标题

3) 创建一个表单

我们首先通过在 body 部分 中创建一个标签和输入字段来创建一个表单。之后，我们将使用此表单来存储信息。我们将按以下方式编写所有这些内容

4) 添加样式/边距并分隔容器

现在，我们的应用程序看起来不太酷。因此，我们将使用 <div></div> 标签 分隔容器，并按以下方式设置容器的边距

注意：我们将在 head 部分的 <style></style> 标签中编写样式和边距的代码。

5) 添加按钮以保存数据。

现在，我们将在表单中添加一个按钮，将数据保存到浏览器中。因此，当我们单击该按钮时，数据将被存储到我们的浏览器中。我们将按以下方式使用 <button></button> 标签 在 input 字段下方创建一个按钮

6) 从表单获取数据

现在，我们将获取表单数据。为此，我们将使用 <script></script> 标签 在 <style></style> 标签 下创建一个自定义脚本。我们将使用 window.onload 函数，该函数在屏幕加载时被调用。在这个函数中，我们将获取按钮并使用一个 事件监听器 来回调自定义函数 storeData，如下所示

7) 创建 storeData 自定义函数

现在，我们将通过传递一个参数来创建一个自定义函数 storeData。我们将使用 ID 从表单中获取板球运动员的姓名。之后，我们将按以下方式将获取的数据设置为本地存储

我们可以使用浏览器检查本地存储数据。

我们也可以按以下方式在不同的键下保存其他数据

8) 检索数据

现在，我们将创建另一个按钮来检索数据，其方式与我们之前创建的获取数据的方式相同。之后，我们将使用 ID 获取按钮，该 ID 将使用函数（即 getData）调用。我们还将使用 <div></div> 标签添加一个结果字段，如下所示

Window.onload 函数

Body 部分

9) 创建 getData 函数

我们将在 <script></script> 标签中创建 getData 函数，该函数将由检索按钮调用。我们将使用 localStorage.getItem() 函数从本地存储中获取数据，并使用 ID 显示结果。完整的自定义脚本如下所示。