Javascript 在页面重新加载时保留页面数据

我有一个HTML表，我正在使用jQuery添加和删除行。例如，当我添加10行，然后重新加载页面时，所有添加的数据都会被擦除

重新加载页面后，如何保留该数据

这就是我到目前为止所做的：

函数AddRow（）{
$（'.print table'）。追加（“99900删除”）
}
$（'.print table'）。在（'click'，'.removebtn'，函数（）上{
$（this.parent（）.parent（）.remove（）；
});

#
凭单#
身份证件
学生全名
应付的
支付
支付
近距离平衡
行动
999
00
删除
添加行
您需要将这些新创建的行存储在某处，并在加载站点后（或加载时）将其加载到dom中

通过JavaScript添加的行只是暂时的，因此不会保存在文件中，因为您只是操作dom。更准确地说：这些更改只适用于您，在您现在使用的浏览器中

要使其永久（并因此对每个人都可见），需要保存创建的行，如上所述

例如，您可以将这些行存储在
.txt
-文件或数据库中，这取决于您将如何处理它。您可以序列化这些值并在取消序列化后加载它们，然后将其附加到硬编码表中
 将数据设置为本地存储，稍后检索

localstorage.setItem("data", "<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>");

localstorage.setItem（“数据”，“99900删除”）；



var olddata=localstorage.getItem（“数据”）；
$（'.print table'）。追加（数据）；
函数AddRow（）{
$（'.print table'）。追加（“99900删除”）
localstorage.setItem（“数据”，localstorage.getItem（“数据”）+“99900删除”）；
}
$（'.print table'）。在（'click'，'.removebtn'，函数（）上{
$（this.parent（）.parent（）.remove（）；
});
尝试使用相关值：这些（更改的）值是否对每个人都可见，还是仅对您可见？如果您添加了10行，而其他人打开了页面，那么这10行是否也应该存在？是，在有人删除这些行之前，每个用户都必须可以看到这些行。如何在任何文件中存储行@这在纯JavaScript中是不可行的，因为它不允许访问文件（出于安全原因）。您需要与PHP或任何可以访问这些内容的语言配对。数据库输入也是如此。此外，正如@ryad建议的那样，您可以尝试
window.localStorage
-方法。
    <script type="text/javascript">
   var olddata = localstorage.getItem("data");

    $('.print-table').append(data);

        function AddRow() {
            $('.print-table').append("<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>")

    localstorage.setItem("data", localstorage.getItem("data")+"<tr><td>999</td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td><input type='text' name='id'></td><td>00</td><td><button class='btn btn-primary btn-xs removebtn' >Delete</button></td></tr>");

        }
        $('.print-table').on('click','.removebtn', function() {
             $(this).parent().parent().remove();
        });
    </script>