本文档将指导你如何使用 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 中。
读取数据： 在页面加载时，从 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 应用程序的功能。
以上就是使用 jQuery 将数据保存到 localStorage的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580302.html
微信扫一扫 
支付宝扫一扫 
