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](http://stackoverflow.com/questions/1458724/how-to-set-unset-cookie-with-jquery) plugin. — Sen Jacob, Feb 19 '13 at 03:58
You can save it in session on server side then...with javascript it is better with browser cookies... — Bhushan Firake, Feb 19 '13 at 04: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, Feb 19 '13 at 04:14
@prodigitalson, u r right ! i guess, i need to work on server side with session ! i got lots of element to append ! and i dont need them to save on db — ALAN, Feb 19 '13 at 04:23
Have you tried using jQuery plugins to store data ? Have a look at http://www.jstorage.info/ — maan81, Feb 19 '13 at 04:25

score 1 · Answer 1 · answered Feb 19 '13 at 04:24

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 '13 at 04:24

Rohan Kumar

38,998
11
69
99

If `w3schools` is a `wrong choice` then you have many choices after searching on `google` like http://www.html5rocks.com/en/features/storage http://en.wikipedia.org/wiki/Web_storage http://www.codeproject.com/Articles/361428/HTML5-Web-Storage – Rohan Kumar Feb 19 '13 at 04:31

score 0 · Answer 2 · edited May 23 '17 at 10:28

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

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

2 Answers2