数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学我需要一个 HTML5 的客户端浏览器数据库。我有哪些选择？
本文将要执行的任务是：我需要一个 HTML5 的客户端浏览器数据库，我有哪些选择？在深入探讨文章之前，让我们先来看一下。
HTML5 引入了两种类似于 HTTP 会话 Cookie 的机制，用于在客户端存储结构化数据。这两种存储分别是会话存储和本地存储，它们将用于处理不同的情况。
您可以为此目的在 HTML5 中使用本地存储。本地存储设计用于跨多个窗口的存储，并且持续时间超过当前会话。
本地存储
Web 存储应用程序编程接口包含 HTML5 本地存储的部分。这是一种网页用来在用户的 Web 浏览器中本地存储命名键/值对的技术。通常使用本地存储在来自同一域的 HTML 页面中存储和检索数据。
本地存储使用 localStorage 对象永久存储您整个网站的数据。
localStorage.setItem(key, value) 存储与键关联的数据。
localStorage.getItem(key) 检索与键关联的数据。
为了更好地理解本地存储如何提供帮助，让我们考虑以下示例。
示例 1：使用 HTML 本地存储
在下面的示例中，我们使用本地存储在 Web 中存储数据，无需过期。
<!DOCTYPE html>
<html>
<body>
<input id="name" type="name" placeholder="enter your name" />
<button type="submit" onClick="handleClick()">Click</button>
<br />
<div id="Varma"></div>
<script>
function handleClick() {
if (typeof Storage !== "undefined") {
let name = document.getElementById("name").value;
localStorage.setItem("name", name);
document.getElementById("Varma").innerHTML =
"Welcome To Tutorialspoint" + " " + localStorage.name;
}
else {
alert("Sorry! your browser doesn't support Web Storage");
}
}
</script>
</body>
</html>
执行上述脚本后，它将生成显示输入字段和单击按钮的输出。当用户在输入字段中输入内容后单击按钮时，数据将存储在本地存储中，并且没有验证。
示例 2
考虑下面的示例，我们使用本地存储在 Web 中存储数据，无需过期。
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html>
<body>
<script>
if( localStorage.hits ){
localStorage.hits = Number(localStorage.hits) +1;
}
else{
localStorage.hits = 1;
}
document.write("Total Hits :" + localStorage.hits );
</script>
<p>Refresh the page to increase number of hits.</p>
<p>Close the window and open it again and check the result.</p>
</body>
</html>
当脚本执行时，它将生成一个包含总点击次数和提示的输出。当用户刷新网页时，点击次数会增加并存储该值。
更新于：2022-12-15
317 次浏览
广告