Question

我一直在研究如何使用HTML5网络存储（客户端数据库存储）的示例。我正在尝试构建一个非常简单的示例应用程序，以了解它是如何工作的。我所做的是我在html创建了一个简单的表单和提交按钮。截至目前，点击submit按钮没有任何反应，因为我想专注于网络存储。代码如下所示。我现在要做的是，每当用户点击submit按钮时，搜索查询应存储在我想要使用HTML5网络存储的客户端数据库中。我可以使用onClick()捕获用户单击按钮，我想要一个存储用户查询的函数被调用。如果用户在software中写了类似form的内容，那么显然应该存储查询，例如user query: software，如果用户将form留空，则直接点击{ {1}}按钮，它应显示为空或空白或类似submit。

截至目前，我并不关心我是否专门使用本地存储或会话存储，只要我现在使用其中一个存储。如果提供有关任何存储的任何帮助，我可以尝试其他类型的存储（本地或会话）。

我的客户代码user query:是：

test.html

您可以在任何w3schools剪贴簿或您自己的本地或网络服务器上试用该代码。以下答案中的更新代码如下所示，但单击<!DOCTYPE html> <html> <body> <form> Search something: <input type="text" name="FirstName" > <input type="submit" value="Submit"> </form> <p>Click the "Submit" button and the form will show you nothing as of now! :P</p> </body> </html>按钮时仍未显示任何内容。

submit

Answer 1

你可以这样使用localStorage：

//inside your submit handler
localStorage.setItem("yourKeyGoesHere", value); //where value is the element you want stored

//retrieve from localStorage
localStorage.getItem("yourKeyGoesHere");

sessionStorage以完全相同的方式工作（在语法方面，将localStorage替换为sessionStorage - 但他们做了不同的事情）

Answer 2

最简单的方法是将所有数据存储执行放在按钮点击事件中。

定义您的连接，

定义查询命令

从每个表单元素

接收数据

打开你的连接，

通过POST执行查询，

关闭你的连接，

决定在回发上做什么（例如明文框或更改区域颜色等）。

您还可以在页面加载事件之后（按钮之前）进行回发，以便让您知道成功提交到存储的数据。

检查onclick事件层次结构 - - 您可能需要引用一些更具体的内容来将自定义clickMyStorage onclick事件中的数据导入本地存储 - 无论如何都有一些数据状态确认逻辑会很好...

在客户端数据库中存储用户活动

2 个答案: