如何使用 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 操作。

首先，确保你已经引入了 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 存储的数据是特定于域的。这意味着只有在同一个域名下的网页才能访问相同的数据。

5. 总结

通过使用 localStorage，我们可以轻松地实现在页面刷新后保持文本框内容的功能。这对于需要持久保存用户输入数据的应用程序非常有用，例如工作日计划、笔记应用等。只需要简单的几行 JavaScript 代码，就能极大地提升用户体验。