Cookies de valores añadidos con append

[Alexis88]

Te sugiero utilizar Almacenamiento Local, que actúa como las cookies, pero con la ventaja de que puedes almacenar más datos de una manera más sencilla y segura.

La idea sería de que cuando crees un nuevo <li>, guardes los datos que contiene dicho elemento, de tal modo que cuando recargues la página, leas los datos almacenados y crees elementos <li> según la cantidad de datos almacenados.

Código Javascript:

//Cuando cargue la página, iniciamos el proceso de obtención de datos almacenados
$(document).ready(function(){
    //Si ya se guardaron datos localmente, se toman dichos datos
    //Caso contrario, creo un nuevo objeto y lo codifico en formato JSON
    localStorage.lista = localStorage.lista || JSON.stringify({contenido: []});
 
    //Decodifico el objeto almacenado localmente para poder interactuar con él fácilmente
    var datos = JSON.parse(localStorage.lista);
    
    //Si hay contenido almacenado, creo tantos <li> como contenido exista
    if (datos.contenido.length){
        $.each(datos.contenido, function(){
            $("#list").append(this);
        });
    }
    
    //Cuando cree un nuevo elemento para la lista
    $("#add_item").click(function(){
        var relleno = "<li><input type='checkbox' /><span>" + $("input[name=Item]").val() + "</span></li>";
        $('#list').append(relleno);
        datos.contenido.push(relleno); //Lo añado al array del objeto
        localStorage.lista = JSON.stringify(datos); //Y lo almaceno localmente
    });
});
 

Saludos