本文将指导你如何使用 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 操作。
系统简介逍遥内容管理系统（CarefreeCMS）是一款功能强大、易于使用的内容管理平台，采用前后端分离架构，支持静态页面生成，适用于个人博客、企业网站、新闻媒体等各类内容发布场景。核心特性1、模板套装系统 - 支持多套模板自由切换，快速定制网站风格2、静态页面生成 - 一键生成纯静态HTML页面，访问速度快，SEO友好3、文章管理 - 支持富文本编辑、草稿保存、文章属性标记、自动提取SEO4、全
首先，确保你已经引入了 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 代码，就能极大地提升用户体验。
