How to save append item, if we do page refresh in jquery?

Question

i want to append few line of html and that's remains as same if we do page refresh

how could i do that

code is :

<!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>

You may need to save the added items in browser cookie, and append those again after page loaded. Refer jquery-cookie plugin. — Sen Jacob
– Sen Jacob, Commented Feb 19, 2013 at 3:58
You can save it in session on server side then...with javascript it is better with browser cookies... — Bhushan Firake
– Bhushan Firake, Commented Feb 19, 2013 at 4:05
If you use a cookie then you dont need to send the elements to the server to get them in the session. On the other hand i usually try not to work with cookies on the client side either... So up to you either way it would work. — prodigitalson
– prodigitalson, Commented Feb 19, 2013 at 4:14

Rohan Kumar · Accepted Answer · 2013-02-19 04:24:08Z

1

Use web storage of HTML5 like:

    $(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>';
        }

    });
});

The url will help you more about web storage http://www.w3schools.com/html/html5_webstorage.asp

answered Feb 19, 2013 at 4:24

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rohan Kumar Over a year ago

If w3schools is a wrong choice then you have many choices after searching on google like html5rocks.com/en/features/storage en.wikipedia.org/wiki/Web_storage codeproject.com/Articles/361428/HTML5-Web-Storage

Community · Accepted Answer · 2017-05-23 10:28:33Z

You may need to save the added items in browser cookie, and append those again after page loaded. Refer jquery-cookie plugin

See an example in jsFiddle for using cookies in your case.

<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>

and in 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"));
    });
});

Collectives™ on Stack Overflow

How to save append item, if we do page refresh in jquery?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related