重新加载页面后新添加的元素消失（jQuery）

Question

我在 AJAX 调用中使用 jQuery 的 .append() 将新的 li 元素添加到 success 上的 ul。问题是，每当我刷新页面时，新添加的列表项就会消失。

我读过这与刷新原始页面有关，并且某些选项是使用 cookie（PHP 或 jQuery）。我还看到了一些关于localStorage 的信息。我没有使用 HTML5，如果这很重要的话。

解决此问题的最佳方法是什么？如果我使用 PHP，我可以将脚本嵌入到 jQuery 中吗？有没有更优雅的方式来解决这个问题？

谢谢

编辑：包含代码

AJAX

$.ajax ({
type: 'post',
url: '/classes/resources/addResource.php',
data: {
    recName: $('#recName').val(),
    recURL: $('#recURL').val()
},
success: function(data) {
    if (data === 'added') {
        var h3ID = $('#categoryList option:selected').val();
        var title = $('#recName').val();
        var url = $('#recURL').val();
        var newListItem = '<li><a href=\"' + url + '\">' + title + '</a></li>';
        $('ul#' + h3ID).append(newListItem);
        $('span#resError').fadeIn(400).text('Resource added successfully. Add another?');
   }
   else
       $('span#resError').fadeIn(400).text('There was an error adding this resource');
   }
});

HTML

<h3 class="category" id="1">
    Category 1
</h3>
<ul id="1">
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    <li>List item 4</li>
</ul>

当我添加列表项 5 等时，我希望这些新列表项在刷新页面时保留。

Answer 1

如果您使用 ajax / javascript 动态构建页面，则需要存储当前状态，以便在重新加载页面时以完全相同的方式构建它。

如果您需要构建页面的信息存储在客户端，则有几种方法可以做到这一点，例如会话（服务器端）或 cookie / localStorage。

如果您不使用 html5 但使用 ajax 构建页面，则使用会话并在服务器端执行所有操作可能是最简单的选择。每次发出 ajax 请求时，只需存储页面的当前/更新状态。

另一个考虑因素是信息必须保留多长时间。如果您使用标准的 php 会话机制，您的会话/状态将很快丢失（我认为使用默认设置大约需要一个小时而不重新加载/刷新）。