Question

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

Answer 1

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/