使用 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 代码以实现此目的：
<!DOCTYPE html>
<html lang="en">
<head>
<title>CRUD Table jQuery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 text-right">
<input type="button" id="btnAdd" class="btn btn-primary para" value="Add New" />
</div>
</div>
<div class="row pt-3">
<div class="col-md-12 col-sm-12 col-12 p-2 ">
<table id="tblData" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Address</th>
<th>Age</th>
<th class="tdaction">Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<script>
var emptyRow = "<tr><td colspan='4' class='text-center'></td></tr>";
var emptyNewRow = "<tr class='trNewRow'>";
emptyNewRow = emptyNewRow + " <td class='tdID'>";
emptyNewRow = emptyNewRow + " <input type='text' class='form-control txtID' />";
emptyNewRow = emptyNewRow + " </td>";
emptyNewRow = emptyNewRow + " <td class='tdName'>";
emptyNewRow = emptyNewRow + " <input type='text' class='form-control txtName' />";
emptyNewRow = emptyNewRow + " </td>";
emptyNewRow = emptyNewRow + " <td class='tdAddress'>";
emptyNewRow = emptyNewRow + " <input type='text' class='form-control txtAddress' />";
emptyNewRow = emptyNewRow + " </td>";
emptyNewRow = emptyNewRow + " <td class='tdAge'>";
emptyNewRow = emptyNewRow + " <input type='text' class='form-control txtAge' />";
emptyNewRow = emptyNewRow + " </td>";
emptyNewRow = emptyNewRow + " <td class='tdAction'>";
emptyNewRow = emptyNewRow + " <button class='btn btn-sm btn-success btn-save'> Save</button>";
emptyNewRow = emptyNewRow + " <button class='btn btn-sm btn-success btn-cancel'> Delete</button>";
emptyNewRow = emptyNewRow + " </td>";
emptyNewRow = emptyNewRow + "</tr>";
var rowButtons ="<button class='btn btn-success btn-sm btn-edit' > Edit </button> <button class='btn btn-danger btn-sm' > Delete </button>";
var rowUpdateButtons ="<button class='btn btn-success btn-sm btn-save' > Update </button> <button class='btn btn-danger btn-sm btn-save' > Delete </button> ";
$(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("<input type='text' value='"+id+"' class='form-control txtID' />");
const name =$(this).parent().parent().find(".tdName").html();
$(this).parent().parent().find(".tdName").html("<input type='text' value='"+name+"' class='form-control txtName' />");
const address =$(this).parent().parent().find(".tdAddress").html();
$(this).parent().parent().find(".tdAddress").html("<input type='text' value='"+address+"' class='form-control txtAddress' />");
const age =$(this).parent().parent().find(".tdAge").html();
$(this).parent().parent().find(".tdAge").html("<input type='text' value='"+age+"' class='form-control txtAge' />");
$(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 = "<tr>";
newRow += "<td class='tdID'>" + rowData.id + "</td>";
newRow += "<td class='tdName'>" + rowData.name + "</td>";
newRow += "<td class='tdAddress'>" + rowData.address + "</td>";
newRow += "<td class='tdAge'>" + rowData.age + "</td>";
newRow += "<td class='tdAction'>" + rowButtons + "</td>";
newRow += "</tr>";
$("#tblData tbody").append(newRow);
}
}
}
});
</script>
</body>
</html>代码解释：
-
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。
