如何使用 localStorage 在页面刷新后保持文本框内容-html教程-PHP中文网

如何使用 localStorage 在页面刷新后保持文本框内容

聖光之護

发布： 2025-08-22 22:00:17

原创

290人浏览过

如何使用 localstorage 在页面刷新后保持文本框内容

本文将指导你如何使用 JavaScript 的 localStorage API，实现在网页刷新后，文本框中的内容能够被持久保存并恢复。我们将通过一个工作日计划示例，演示如何保存和读取文本框的值，从而避免因页面刷新导致数据丢失。

使用 localStorage 保存和恢复文本框内容

localStorage 是 Web Storage API 的一部分，允许我们在用户的浏览器中存储键值对数据。这些数据在浏览器关闭后仍然存在，直到被显式删除或浏览器清除缓存。这使得 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 元素，其 id 为 8am-text，和一个 button 元素，其 id 为 8am-btn。

2. JavaScript 代码

接下来，我们需要编写 JavaScript 代码来处理保存和恢复文本框内容的功能。我们将使用 jQuery 来简化 DOM 操作。

如知AI笔记

如知笔记——支持markdown的在线笔记，支持ai智能写作、AI搜索，支持DeepseekR1满血大模型

查看详情

首先，确保你已经引入了 jQuery 库：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

登录后复制

然后，编写以下 JavaScript 代码：

$(document).ready(function() {
  // 保存文本框内容
  $('#8am-btn').on('click', function() {
    var tb8 = $('#8am-text').val();
    localStorage.setItem('8am-text', tb8);
  });

  // 恢复文本框内容
  if (typeof(Storage) !== "undefined") {
    $("#8am-text").val(localStorage.getItem("8am-text"));
  } else {
    $("#8am-text").val("您的浏览器不支持 localStorage.");
  }
});

登录后复制

这段代码做了以下几件事：

$(document).ready(function() { ... });: 确保在文档加载完成后执行代码。
$('#8am-btn').on('click', function() { ... });: 为保存按钮绑定点击事件。当点击按钮时，获取文本框的值，并使用 localStorage.setItem() 方法将其保存到 localStorage 中。键名为 8am-text，值为文本框的内容。
if (typeof(Storage) !== "undefined") { ... }: 检查浏览器是否支持 localStorage。
$("#8am-text").val(localStorage.getItem("8am-text"));: 从 localStorage 中读取键名为 8am-text 的值，并使用 $("#8am-text").val() 方法将其设置到文本框中。
else { ... }: 如果浏览器不支持 localStorage，则在文本框中显示一条消息。

3. 代码解释

localStorage.setItem(key, value): 将给定的键值对存储到 localStorage 中。key 是一个字符串，表示键名；value 是一个字符串，表示键值。
localStorage.getItem(key): 从 localStorage 中读取给定键名的值。如果键名不存在，则返回 null。
$("#8am-text").val(value): 使用 jQuery 设置 id 为 8am-text 的元素的 value 属性。

4. 注意事项

localStorage 只能存储字符串类型的数据。如果需要存储其他类型的数据，需要先将其转换为字符串，例如使用 JSON.stringify() 方法。
localStorage 的存储空间有限，一般为 5MB 或 10MB，具体取决于浏览器。
localStorage 存储的数据是持久的，即使浏览器关闭后仍然存在。如果需要删除数据，可以使用 localStorage.removeItem(key) 方法。
localStorage 存储的数据是特定于域的。这意味着只有在同一个域名下的网页才能访问相同的数据。