使用 jQuery 将数据保存到 Local Storage-html教程-PHP中文网

使用 jquery 将数据保存到 local storage

使用 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 中存储敏感信息，例如密码或信用卡号。