如何将文本框的值设置为 LocalStorage 中的值-html教程-PHP中文网

如何将文本框的值设置为 LocalStorage 中的值

聖光之護

发布： 2025-08-22 23:18:01

原创

469人浏览过

如何将文本框的值设置为 localstorage 中的值

本文档旨在解决如何利用 JavaScript 和 LocalStorage，实现在页面刷新后，文本框内容依然保持不变的问题。通过将文本框的值存储在 LocalStorage 中，并在页面加载时读取 LocalStorage 中的值，可以轻松实现这一功能。本文将提供详细的代码示例和步骤，帮助开发者理解和应用该技术。

使用 LocalStorage 持久化文本框内容

在 Web 开发中，用户输入的数据通常需要在页面刷新后保持不变。LocalStorage 提供了一种简单有效的方式来实现这一需求。以下是如何使用 LocalStorage 来持久化文本框内容的步骤。

1. HTML 结构

首先，我们需要一个包含文本框和保存按钮的 HTML 结构。例如：

<div class="container">
  <div class="row">
    <div class="hour">
      <p class="time-block col-xl-1 col-lg-1 col-md-2 col-sm-2">8a</p>
    </div>
    <textarea class="description col-xl 10 col-lg-10  col-md-8 col-sm-8" id="8am-text"></textarea>
    <button id="8am-btn" class="saveBtn col-xl-1 col-lg-1 col-md-2 col-sm-2">Save</button>
  </div>
</div>

登录后复制

在这个例子中，我们有一个文本框（<textarea>）和一个保存按钮（<button>）。文本框的 ID 是 8am-text，保存按钮的 ID 是 8am-btn。

2. JavaScript 代码

接下来，我们需要使用 JavaScript 来实现保存和加载文本框内容的功能。

保存文本框内容

当用户点击保存按钮时，我们将文本框的值存储到 LocalStorage 中。

百度文心百中

百度大模型语义搜索体验中心

查看详情

$('#8am-btn').on('click', function() {
  var tb8 = $('#8am-text').val();
  localStorage.setItem('8am-text', tb8);
});

登录后复制

这段代码使用 jQuery 监听 8am-btn 的点击事件。当按钮被点击时，它会获取 8am-text 文本框的值，并使用 localStorage.setItem() 方法将其存储到 LocalStorage 中，键名为 8am-text。

加载文本框内容

在页面加载时，我们需要从 LocalStorage 中读取文本框的值，并将其设置到对应的文本框中。

$(document).ready(function() {
  if (typeof(Storage) !== "undefined") {
    // 从 LocalStorage 获取值并设置到文本框
    $("#8am-text").val(localStorage.getItem("8am-text"));
  } else {
    $("#8am-text").val("您的浏览器不支持 LocalStorage.");
  }
});

登录后复制

这段代码在文档加载完成后执行。首先，它检查浏览器是否支持 LocalStorage。如果支持，它会使用 localStorage.getItem() 方法从 LocalStorage 中获取 8am-text 键对应的值，并使用 $("#8am-text").val() 方法将其设置到文本框中。如果浏览器不支持 LocalStorage，则在文本框中显示一条消息。

3. 完整代码示例

下面是完整的代码示例，包括 HTML 和 JavaScript：

<!DOCTYPE html>
<html>
<head>
  <title>LocalStorage 示例</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

  <div class="container">
    <div class="row">
      <div class="hour">
        <p class="time-block col-xl-1 col-lg-1 col-md-2 col-sm-2">8a</p>
      </div>
      <textarea class="description col-xl 10 col-lg-10  col-md-8 col-sm-8" id="8am-text"></textarea>
      <button id="8am-btn" class="saveBtn col-xl-1 col-lg-1 col-md-2 col-sm-2">Save</button>
    </div>
  </div>

  <script>
    $(document).ready(function() {
      $('#8am-btn').on('click', function() {
        var tb8 = $('#8am-text').val();
        localStorage.setItem('8am-text', tb8);
      });

      if (typeof(Storage) !== "undefined") {
        // 从 LocalStorage 获取值并设置到文本框
        $("#8am-text").val(localStorage.getItem("8am-text"));
      } else {
        $("#8am-text").val("您的浏览器不支持 LocalStorage.");
      }
    });
  </script>

</body>
</html>

登录后复制

注意事项

浏览器兼容性： 确保你的目标用户使用的浏览器支持 LocalStorage。大多数现代浏览器都支持 LocalStorage，但旧版本的浏览器可能不支持。
数据类型： LocalStorage 只能存储字符串类型的数据。如果需要存储其他类型的数据，需要先将其转换为字符串，然后在读取时再转换回原始类型。可以使用 JSON.stringify() 和 JSON.parse() 方法来实现对象和数组的序列化和反序列化。
存储容量： LocalStorage 的存储容量有限，通常为 5MB 或 10MB，具体取决于浏览器。因此，不适合存储大量数据。
安全性： LocalStorage 存储的数据是明文存储在客户端的，因此不适合存储敏感信息，如密码或信用卡号。

总结

通过使用 LocalStorage，我们可以轻松地实现文本框内容的持久化，从而提高用户体验。只需简单的几行 JavaScript 代码，就可以在页面刷新后保持文本框的内容不变。然而，在使用 LocalStorage 时，需要注意浏览器兼容性、数据类型、存储容量和安全性等问题。

以上就是如何将文本框的值设置为 LocalStorage 中的值的详细内容，更多请关注php中文网其它相关文章！