为下面的程序添加数据保存功能，以便下次打开时，显示原有数据_给前端页面需要输入的数据添加保存功能, 然后再次打开这个地方可以显示之前保存-CSDN博客

本文链接：https://blog.csdn.net/2301_79698214/article/details/146387397

为下面的程序添加数据保存功能，以便下次打开时，显示原有数据。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            tr{
                height: 60px;
            }
            td ,th{
                width: 150px;
                text-align: center;
                border: 1px solid red;
            }
        </style>
        <script>
            function addNode(){
                var tab = document.getElementById ("tab");
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                td.innerHTML = '<input type="Text"/ size="10px" onblur="saveVal(this)" />';
                var td2 = document.createElement("td");
                td2.innerHTML = '<input type="Text" size="10px" onblur="saveVal(this)" />';
                var td3 = document.createElement("td");
                td3.innerHTML = '<input type="button" value="添加" onclick="addNode()" />'+
                                '<input type="button" value="删除" onclick="removeNode(this)" />'+
                                '<input type="button" value="修改" onclick="editNode(this)" />'; // 添加修改按钮
                tab.appendChild(tr);
                tr.appendChild(td);
                tr.appendChild(td2);
                tr.appendChild(td3);
            }

            function saveVal(thi){
                var td = thi.parentNode;
                td.innerText = thi.value;
            }

            function removeNode(abc){
                var tr = abc.parentNode.parentNode;
                tr.remove();
            }

            function editNode(btn) {
                var tr = btn.parentNode.parentNode;
                var tds = tr.getElementsByTagName('td');
                for (var i = 0; i < 2; i++) { // 前两列是书名和价格
                    var td = tds[i];
                    var value = td.innerText;
                    td.innerHTML = '<input type="Text" size="10px" value="' + value + '" onblur="saveVal(this)" />';
                }
            }
        </script>
    </head>
    <body>
        <table id="tab" border="1px" align="center">
            <tr>
                <th>图书名称</th>
                <th>图书价格</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>javaSE</td>
                <td>19</td>
                <td>
                    <input type="button" name="" id="" value="添加" onclick="addNode()" />
                    <input type="button" name="" id="" value="删除" onclick="removeNode(this)" />
                    <input type="button" name="" id="" value="修改" onclick="editNode(this)" /> <!-- 添加修改按钮 -->
                </td>
            </tr>
            <tr>
                <td>javaEE</td>
                <td>29</td>
                <td>
                    <input type="button" name="" id="" value="添加" onclick="addNode()" />
                    <input type="button" name="" id="" value="删除" onclick="removeNode(this)" />
                    <input type="button" name="" id="" value="修改" onclick="editNode(this)" /> <!-- 添加修改按钮 -->
                </td>
            </tr>
        </table>
    </body>
</html>

添加一个数据保存功能和打开时的数据读取功能，修改后的程序如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            tr{
                height: 60px;
            }
            td ,th{
                width: 150px;
                text-align: center;
                border: 1px solid red;
            }
        </style>
        <script>
            // 页面加载时从 localStorage 中恢复数据
            window.onload = function() {
                var data = localStorage.getItem('bookTableData');
                if (data) {
                    var table = document.getElementById('tab');
                    table.innerHTML = data;
                }
            };

            function addNode(){
                var tab = document.getElementById ("tab");
                var tr = document.createElement("tr");
                var td = document.createElement("td");
                td.innerHTML = '<input type="Text"/ size="10px" οnblur="saveVal(this)" />';
                var td2 = document.createElement("td");
                td2.innerHTML = '<input type="Text" size="10px" οnblur="saveVal(this)" />';
                var td3 = document.createElement("td");
                td3.innerHTML = '<input type="button" value="添加" οnclick="addNode()" />'+
                                '<input type="button" value="删除" οnclick="removeNode(this)" />'+
                                '<input type="button" value="修改" οnclick="editNode(this)" />';
                tab.appendChild(tr);
                tr.appendChild(td);
                tr.appendChild(td2);
                tr.appendChild(td3);
                saveTableData();
            }

            function saveVal(thi){
                var td = thi.parentNode;
                td.innerText = thi.value;
                saveTableData();
            }

            function removeNode(abc){
                var tr = abc.parentNode.parentNode;
                tr.remove();
                saveTableData();
            }

            function editNode(btn) {
                var tr = btn.parentNode.parentNode;
                var tds = tr.getElementsByTagName('td');
                for (var i = 0; i < 2; i++) {
                    var td = tds[i];
                    var value = td.innerText;
                    td.innerHTML = '<input type="Text" size="10px" value="' + value + '" οnblur="saveVal(this)" />';
                }
            }

            // 保存表格数据到 localStorage
            function saveTableData() {
                var table = document.getElementById('tab');
                localStorage.setItem('bookTableData', table.innerHTML);
            }
        </script>
    </head>
    <body>
        <table id="tab" border="1px" align="center">
            <tr>
                <th>图书名称</th>
                <th>图书价格</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>javaSE</td>
                <td>19</td>
                <td>
                    <input type="button" name="" id="" value="添加" οnclick="addNode()" />
                    <input type="button" name="" id="" value="删除" οnclick="removeNode(this)" />
                    <input type="button" name="" id="" value="修改" οnclick="editNode(this)" />
                </td>
            </tr>
            <tr>
                <td>javaEE</td>
                <td>29</td>
                <td>
                    <input type="button" name="" id="" value="添加" οnclick="addNode()" />
                    <input type="button" name="" id="" value="删除" οnclick="removeNode(this)" />
                    <input type="button" name="" id="" value="修改" οnclick="editNode(this)" />
                </td>
            </tr>
        </table>
    </body>
</html>

修改说明：

页面加载时恢复数据：使用 window.onload 事件，在页面加载时从 localStorage 中获取之前保存的表格数据，并将其设置为表格的 innerHTML。
保存数据到 localStorage：创建了一个 saveTableData 函数，用于将表格的 innerHTML 保存到 localStorage 中。
在关键操作后保存数据：在 addNode、saveVal 和 removeNode 函数中调用 saveTableData 函数，确保每次数据发生变化时都能保存到 localStorage 中。