本文档将指导你如何使用 jQuery 将表格数据保存到浏览器的 localStorage 中。localStorage 允许你将数据以键值对的形式存储在用户的浏览器中，即使关闭浏览器后数据仍然存在。本文将提供详细的代码示例，帮助你理解如何读取、存储和更新 localStorage 中的数据，并将其应用于 CRUD 操作的表格中。
了解 localStorage
localStorage 是 Web Storage API 的一部分，它提供了一种在客户端存储键值对数据的机制。与 cookie 相比，localStorage 存储容量更大，且不会随每次 HTTP 请求发送到服务器，因此更适合存储大量客户端数据。
基本用法
localStorage 的基本用法非常简单，主要涉及以下几个方法：
- localStorage.setItem(key, value): 将指定的值存储到 localStorage 中，键为 key。
- localStorage.getItem(key): 从 localStorage 中检索与指定键 key 关联的值。
- localStorage.removeItem(key): 从 localStorage 中删除与指定键 key 关联的项。
- localStorage.clear(): 清除 localStorage 中的所有数据。
将表格数据保存到 localStorage
为了将表格数据保存到 localStorage，我们需要在每次创建、更新或删除表格行时，将数据序列化并存储。以下是如何将示例代码中的数据保存到 localStorage 的步骤：
获取表格数据： 在保存数据之前，需要从表格中提取所有行的数据。可以将每一行的数据转换为一个 JavaScript 对象，然后将所有行的数据存储在一个数组中。
序列化数据： 由于 localStorage 只能存储字符串，我们需要将 JavaScript 对象或数组序列化为 JSON 字符串。可以使用 JSON.stringify() 方法来实现。
存储数据： 使用 localStorage.setItem() 方法将序列化后的 JSON 字符串存储到 localStorage 中。
95Shop仿醉品商城下载95Shop可以免费下载使用，是一款仿醉品商城网店系统，内置SEO优化，具有模块丰富、管理简洁直观，操作易用等特点，系统功能完整，运行速度较快，采用ASP.NET(C#)技术开发，配合SQL Serve2000数据库存储数据，运行环境为微软ASP.NET 2.0。95Shop官方网站定期开发新功能和维护升级。可以放心使用！ 安装运行方法 1、下载软件压缩包； 2、将下载的软件压缩包解压缩，得到we
读取数据： 在页面加载时，从 localStorage 中读取数据，并将其反序列化为 JavaScript 对象或数组。可以使用 JSON.parse() 方法来实现。
更新表格： 使用读取的数据更新表格。
代码示例
以下代码展示了如何修改示例代码，将表格数据保存到 localStorage 中：
$(document).ready(function () {
// 定义 localStorage 的键名
const localStorageKey = 'tableData';
// 从 localStorage 加载数据
function loadDataFromLocalStorage() {
const storedData = localStorage.getItem(localStorageKey);
if (storedData) {
const data = JSON.parse(storedData);
// 清空表格
$("#tblData tbody").empty();
// 循环创建表格行
data.forEach(function (item) {
const newRow = "" +
"" + item.id + " " +
"" + item.name + " " +
"" + item.address + " " +
"" + item.age + " " +
"" + rowButtons + " " +
" ";
$("#tblData tbody").append(newRow);
});
} else {
$("#tblData tbody").append(emptyRow); // adding empty row on page load
}
}
// 保存数据到 localStorage
function saveDataToLocalStorage() {
const tableData = [];
$("#tblData tbody tr").each(function () {
const id = $(this).find(".tdID").text() || $(this).find(".txtID").val();
const name = $(this).find(".tdName").text() || $(this).find(".txtName").val();
const address = $(this).find(".tdAddress").text() || $(this).find(".txtAddress").val();
const age = $(this).find(".tdAge").text() || $(this).find(".txtAge").val();
if (id || name || address || age) {
tableData.push({
id: id,
name: name,
address: address,
age: age
});
}
});
localStorage.setItem(localStorageKey, JSON.stringify(tableData));
}
// 页面加载时加载数据
loadDataFromLocalStorage();
$("#btnAdd").click(function () {
if ($("#tblData tbody").children().children().length == 1) {
$("#tblData tbody").html("");
}
$("#tblData tbody").append(emptyNewRow);
});
$('#tblData').on('click', '.btn-save', function () {
const id = $(this).parent().parent().find(".txtID").val();
$(this).parent().parent().find(".tdID").html("" + id + "");
const name = $(this).parent().parent().find(".txtName").val();
$(this).parent().parent().find(".tdName").html("" + name + "");
const address = $(this).parent().parent().find(".txtAddress").val();
$(this).parent().parent().find(".tdAddress").html("" + address + "");
const age = $(this).parent().parent().find(".txtAge").val();
$(this).parent().parent().find(".tdAge").html("" + age + "");
$(this).parent().parent().find(".tdAction").html(rowButtons);
saveDataToLocalStorage(); // 保存数据
});
$('#tblData').on('click', '.btn-danger', function () {
$(this).parent().parent().remove();
if ($("#tblData tbody").children().children().length == 0) {
$("#tblData tbody").append(emptyRow);
}
saveDataToLocalStorage(); // 保存数据
});
$('#tblData').on('click', '.btn-cancel', function () {
$(this).parent().parent().remove();
saveDataToLocalStorage(); // 保存数据
});
$('#tblData').on('click', '.btn-edit', function () {
const id = $(this).parent().parent().find(".tdID").html();
$(this).parent().parent().find(".tdID").html("");
const name = $(this).parent().parent().find(".tdName").html();
$(this).parent().parent().find(".tdName").html("");
const address = $(this).parent().parent().find(".tdAddress").html();
$(this).parent().parent().find(".tdAddress").html("");
const age = $(this).parent().parent().find(".tdAge").html();
$(this).parent().parent().find(".tdAge").html("");
$(this).parent().parent().find(".tdAction").html(rowUpdateButtons);
});
});关键修改说明:
- localStorageKey: 定义了一个常量 localStorageKey，用于存储 localStorage 中的键名，避免硬编码。
- loadDataFromLocalStorage(): 在页面加载时调用，从 localStorage 中读取数据，并使用读取的数据更新表格。如果 localStorage 中没有数据，则添加一个空行。
- saveDataToLocalStorage(): 在每次创建、更新或删除表格行时调用，从表格中提取数据，将其序列化为 JSON 字符串，并存储到 localStorage 中。
- 在 .btn-save, .btn-danger, 和 .btn-cancel 的点击事件中调用 saveDataToLocalStorage() 函数，确保每次表格数据发生变化时，都将数据保存到 localStorage 中。
注意事项
- 数据类型： localStorage 只能存储字符串。如果需要存储其他类型的数据，需要先将其转换为字符串，然后再存储。可以使用 JSON.stringify() 方法将 JavaScript 对象转换为 JSON 字符串，使用 JSON.parse() 方法将 JSON 字符串转换为 JavaScript 对象。
- 存储容量： localStorage 的存储容量有限，通常为 5MB 或 10MB，具体取决于浏览器。
- 安全性： localStorage 存储在客户端，因此不适合存储敏感数据。
- 浏览器兼容性： localStorage 在现代浏览器中得到广泛支持，但在旧版本浏览器中可能不受支持。在使用 localStorage 之前，应该检查浏览器是否支持它。
总结
通过本文，你学习了如何使用 jQuery 将表格数据保存到 localStorage 中。这可以让你在用户的浏览器中持久化存储数据，即使关闭浏览器后数据仍然存在。请记住，localStorage 只能存储字符串，且存储容量有限，因此在使用时需要注意。通过适当的错误处理和浏览器兼容性检查，你可以安全地使用 localStorage 来增强你的 Web 应用程序的功能。
