CODEWITHSUNDEEP
jquerycookieshtml-listsappendchild
Youss
Youss

Reputation: 4212

Jquery append list and save with cookie plugin

I have a script with which I can save plain text using click event and cookie plugin:

$('.fields').click(function(e) {
    var text = $('#inputBox').val();
    $.cookie('demoCookie',text,{expires: 7, path: '/' });
    $(".jq-text").text(text);
    .....

The cookie is called like this:

var cookie = $.cookie('demoCookie');    
if (cookie){
    $('.jq-text').text(cookie).show();

So now I want to append a list with a link and of course save it with a cookie:

$('.fields').click(function(e) {
    var text = $('#inputBox').val();
    $.cookie('demoCookie',text,{expires: 7, path: '/' });
    $(".jq-text").append('<li><a href="' + text + '">' + text + '</a></li>');

I cant get it to work: JsFiddle

The text is saved but not the list and a href.

ps The problem might be that the dynamically created list is gone the second one refreshes the page..

Upvotes: 1

Views: 678

Answers (1)

manavo
manavo

Reputation: 1899

The problem is that you are overwriting the value every time you save one. That's why you can only read back the last one you added. You'd need to read what is already there, append to it, then save it again.

It will probably be a good idea to create an Array to save your values and make it a JSON string when you write it to the cookie. Then when you're reading it back, you can parse the JSON into an array again (parseJSON jQuery command) and add your new value.

Here's an edited fiddle showing what I mean: http://jsfiddle.net/dx6CN/3/

Upvotes: 3

Related Questions