我一直在查看如何使用 HTML5 Web 存储(客户端数据库存储)的示例。我正在尝试构建一个非常简单的示例应用程序来看看它是如何工作的。我所做的是在 html 中创建了一个简单的表单和提交按钮。截至目前，单击 submit 按钮没有任何反应，因为我想专注于网络存储。代码如下所示。我现在想要做的是，每当用户单击“提交”按钮时，搜索查询都应该存储在我想要使用 HTML5 Web 存储的客户端数据库中。我可以使用 onClick() 捕获用户单击按钮，并且我希望调用一个存储用户查询的函数。如果用户在表单中写入类似software的内容，那么显然应该存储查询，例如user query: software并且如果用户离开form 空白并直接单击submit 按钮，它应该显示 null 或空白或类似 user query: 的内容。
到目前为止，我并不关心我具体使用本地存储还是 session 存储，只要我现在使用其中之一即可。如果提供有关任何存储的任何帮助，我可以尝试其他类型的存储(本地或 session )。
我的客户端代码test.html是:
<!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>
您可以在任何 w3schools 剪贴簿或您自己的本地或 Web 服务器上试用代码。下面的答案更新了代码，但单击提交按钮时仍然没有显示任何内容。
<!DOCTYPE html>
<html>
<head>
<script>
function clickMyStorage()
{
if(typeof(Storage)!=="undefined")
{
localStorage.setItem("YourQueryGoesHere", value);
document.getElementById("result").innerHTML = "Your searched for: " +
localStorage.getItem("YourQueryGoesHere");
}
else
{
document.getElementById("result").innerHTML="Sorry your browser doesnot support web storage...";
}
return false;
}
</script>
</head>
<body>
<form id = "frm1">
<input id = "nm1" type="text" name="arg1">
<input id ="toto" type="button" value="Submit" onclick="clickMyStorage();"/>
<div id="result"> </div>
</form>
</body>
</html>
最佳答案
您可以像这样使用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 ——但它们做不同的事情)
关于javascript - 将用户事件存储在客户端数据库中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20841106/