1

我想附加几行 html，如果我们刷新页面，那将保持不变

我怎么能那样做

代码是：

<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        $("#btn2").click(function () {
            $("ol").append("<li>Appended item</li>");
        });
    });
</script>
</head>
<body>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn2">Append list item</button>
</body>
</html>
4

2 回答 2

1

使用喜欢web storage：HTML5

    $(document).ready(function () {
    $("#btn2").click(function () {
    $("ol").append("<li>Appended item</li>");
        if (localStorage.appendedItem)
        {
            localStorage.appendedItem+='<li>New Appended item</li>';
        }
        else
        {
            localStorage.appendedItem='<li>Appended item</li>';
        }

    });
});

该网址将帮助您更多地了解web storage http://www.w3schools.com/html/html5_webstorage.asp

于 2013-02-19T04:24:08.373 回答
0

您可能需要将添加的项目保存在浏览器 cookie 中，并在页面加载后再次附加这些项目。参考jquery-cookie插件

请参阅jsFiddle中的示例以在您的情况下使用 cookie。

<p>This is another paragraph.</p>
<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="btn2">Append list item</button>
<button id="btn3">Clear Cookies</button>
<button id="btn4">Show Cookies</button>

在js中

$(document).ready(function () {
    $("ol").append($.cookie("listItem"));
    $("#btn2").click(function () {
        var newLi = $("<li class='new'>Appended item</li>").appendTo("ol");
        $.cookie("listItem", (($.cookie("listItem") ? $.cookie("listItem") : '') + newLi.clone().wrap('<div />').parent().html()));
    });
    $("#btn3").click(function () {{
        $("li.new ol").remove();
        $.removeCookie('listItem');
    });
    $("#btn4").click(function () 
        alert($.cookie("listItem"));
    });
});
于 2013-02-19T04:27:50.620 回答