使用 jQuery 将数据保存到 Local Storage
本文将介绍如何使用 jQuery 将数据保存到浏览器的 Local Storage 中。Local Storage 允许你在用户浏览器中存储键值对数据，即使关闭浏览器窗口或选项卡，数据仍然存在。我们将通过一个简单的示例，演示如何从 HTML 表格中获取数据，并将其保存到 Local Storage 中，以及如何从 Local Storage 中读取数据。
什么是 Local Storage？
Local Storage 是 HTML5 提供的一种在客户端存储数据的机制。它类似于 cookies，但具有更大的存储容量（通常为 5MB）和更简单的 API。Local Storage 中的数据仅在用户的浏览器中可用，不会发送到服务器。
Local Storage 的基本操作
Local Storage 提供以下几个基本方法：
localStorage.setItem(key, value): 将指定的键值对存储到 Local Storage 中。键和值都必须是字符串。localStorage.getItem(key): 从 Local Storage 中检索指定键的值。如果键不存在，则返回 null。localStorage.removeItem(key): 从 Local Storage 中删除指定的键值对。localStorage.clear(): 清空 Local Storage 中的所有数据。localStorage.key(index): 获取 Local Storage 中指定索引的键名。
示例：保存表格数据到 Local Storage
假设我们有一个 HTML 表格，其中包含 ID、姓名、地址和年龄等信息。我们希望在用户添加、编辑或删除表格数据时，将这些数据保存到 Local Storage 中，以便在下次访问页面时恢复数据。
以下是如何修改提供的 jQuery 代码以实现此目的：
CRUD Table jQuery var emptyRow = "
ID Name Address Age Action "; var emptyNewRow = " "; emptyNewRow = emptyNewRow + " "; var rowButtons =" "; var rowUpdateButtons =" "; $(document).ready(function () { //debugger; loadData(); // Load data from local storage on page load $("#tblData tbody").append(emptyRow); // adding empty row on page load $("#btnAdd").click(function () { //debugger; if ($("#tblData tbody").children().children().length == 1) { $("#tblData tbody").html(""); } //debugger; $("#tblData tbody").append(emptyNewRow); // appending dynamic string to table tbody }); $('#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); saveData(); // Save data to local storage after saving a row }); $('#tblData').on('click', '.btn-danger', function () { // registering function for delete button $(this).parent().parent().remove(); if ($("#tblData tbody").children().children().length == 0) { $("#tblData tbody").append(emptyRow); } saveData(); // Save data to local storage after deleting a row }); $('#tblData').on('click', '.btn-cancel', function () { $(this).parent().parent().remove(); saveData(); // Save data to local storage after canceling a row }); $('#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); }); function saveData() { var tableData = []; $("#tblData tbody tr").each(function() { var rowData = {}; rowData.id = $(this).find(".tdID").text(); rowData.name = $(this).find(".tdName").text(); rowData.address = $(this).find(".tdAddress").text(); rowData.age = $(this).find(".tdAge").text(); tableData.push(rowData); }); localStorage.setItem('tableData', JSON.stringify(tableData)); } function loadData() { var storedData = localStorage.getItem('tableData'); if (storedData) { var tableData = JSON.parse(storedData); $("#tblData tbody").empty(); // Clear existing table data for (var i = 0; i < tableData.length; i++) { var rowData = tableData[i]; var newRow = ""; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + ""; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + ""; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + ""; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + ""; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + " "; emptyNewRow = emptyNewRow + ""; newRow += " "; $("#tblData tbody").append(newRow); } } } });" + rowData.id + " "; newRow += "" + rowData.name + " "; newRow += "" + rowData.address + " "; newRow += "" + rowData.age + " "; newRow += "" + rowButtons + " "; newRow += "
代码解释：
saveData() 函数:
遍历表格的每一行，提取 ID、姓名、地址和年龄等数据。将每一行的数据存储为一个对象，并将所有行的数据存储在一个数组中。使用 JSON.stringify() 将数组转换为 JSON 字符串。使用 localStorage.setItem(‘tableData’, …) 将 JSON 字符串保存到 Local Storage 中，键名为 ‘tableData’。
loadData() 函数:
使用 localStorage.getItem(‘tableData’) 从 Local Storage 中检索键名为 ‘tableData’ 的数据。如果数据存在，则使用 JSON.parse() 将 JSON 字符串转换为 JavaScript 数组。清空现有的表格数据。遍历数组，为每一行数据创建一个新的表格行，并将数据填充到相应的单元格中。将新的表格行添加到表格中。
调用 saveData() 和 loadData():
在 document.ready 函数中调用 loadData()，以便在页面加载时从 Local Storage 中恢复数据。在 btn-save 和 btn-danger 的点击事件处理程序中调用 saveData()，以便在添加、编辑或删除表格数据时保存数据。
注意事项：
Local Storage 只能存储字符串数据。如果需要存储其他类型的数据，例如数字或对象，需要先将其转换为字符串，然后再存储。可以使用 JSON.stringify() 将对象转换为 JSON 字符串，使用 JSON.parse() 将 JSON 字符串转换为对象。Local Storage 的存储容量有限。如果存储的数据量过大，可能会导致性能问题或数据丢失。Local Storage 中的数据是持久性的，即使关闭浏览器窗口或选项卡，数据仍然存在。如果需要删除数据，可以使用 localStorage.removeItem() 或 localStorage.clear()。由于 Local Storage 是客户端存储，因此存在安全风险。不要在 Local Storage 中存储敏感信息，例如密码或信用卡号。
总结
本文介绍了如何使用 jQuery 将数据保存到浏览器的 Local Storage 中。通过使用 Local Storage，我们可以轻松地在客户端存储和检索数据，从而提高 Web 应用程序的性能和用户体验。希望本文能够帮助你更好地理解和使用 Local Storage。
以上就是使用 jQuery 将数据保存到 Local Storage的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1580227.html
微信扫一扫 
支付宝扫一扫 
