我需要一个 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 次浏览

启动您的 职业生涯

通过完成课程获得认证

开始
广告