[SOLUCIONADO] Cookies de valores añadidos con append

mardojai · #1 (**permalink**) 25/03/2015, 18:18

Hola amigos y gracias de ante mano.

Se trata de un input que agrega un nuevo "li" a una lista "ul" con "append()" de jquery,
Lo que quiero es que cuando el usuario recargue la pagina sus datos sigan, se supone que es con cookies pero no soy muy experto en ello y no se como implementarlo.

Este es mi código:

Código:

<html>
    <head>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        
        <script>
            $(document).ready(function(){
                $('#add_item').click(function(){    
                    var Agregar = $('input[name=Item]').val();
                    $('#list').append('<li><input type="checkbox" /><span>' + Agregar + '</span></li>');
                });
                
                $( '#list' ).on( 'click', 'input:checkbox', function () {
                    $( this ).parent().toggleClass( 'highlight', this.checked ); 
                });
                
                $('#remove_item').click(function(){    
                    $('.highlight').remove();
                });
                
                $( "#list" ).sortable();
                $( "#list" ).disableSelection();
            });          
        </script>
        <style>
            .highlight {
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <input type="text" name="Item"/>            
        
        <div id="add_item">Add</div>
        <div id="remove_item">Remove</div>
        
        <ul id="list">
        </ul>        
    </body>
</html>

Alexis88 · #2 (**permalink**) 26/03/2015, 00:17

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:

Ver original//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

mardojai · #3 (**permalink**) 26/03/2015, 10:03

Gracias por tu ayuda,

Ahora no se si me podrás ayudar con esta otra parte del código, la idea es que cuando el usuario marque una casilla se agregue un class al li y que presionando un boton todos los li con ese class se eliminen.

Lo que quiero es que las acciones de li eliminados y marcados también interaccionen con el Almacenamiento Local.

Código:

$( '#list' ).on( 'click', 'input:checkbox', function () {
                    $( this ).parent().toggleClass( 'highlight', this.checked ); 
                });
                
                $('#remove_item').click(function(){    
                    $('.highlight').remove();
                });

Por ultimo si no es mucho ya, y si es posible, quisiera que el re ordenamiento del ul con "sortable()" de Jquery ui también se guarde.

Código:

$( "#list" ).sortable();
                $( "#list" ).disableSelection();

Alexis88 · #4 (**permalink**) 26/03/2015, 10:36

Para retirar un elemento de un array, primero, debes de utilizar el método $.inArray de jQuery (o indexOf que es un método nativo de JavaScript) para localizar al elemento dentro del array y luego debes de usar el método splice para retirarlo.

Un ejemplo:

Código Javascript:

Ver originalvar array = [5, 3, 2, 8], 
    posicion = $.inArray(3, array);
 
//Si el 3 está en el array
if (posicion > -1){
    //Lo elimino del mismo
    array.splice(posicion, 1);
}

El método $.inArray (así como indexOf), devuelve la posición en el array del elemento buscado o -1 si no está, entonces, si la posición devuelta es mayor a -1, quiere decir que existe en el array y con el método splice, indico la posición del elemento a eliminar y la cantidad de elementos que se eliminarán a partir de dicha posición. Como solo deseo eliminar un elemento, coloco 1.

Una vez que hayas realizado esto, procedes a guardar la información, tal y como lo hice en el ejemplo anterior.

Para el reordenamiento, toma todo el contenido de la lista, colócalo dentro de un array y reemplázalo en el array original, de esta forma, guardarás el contenido en la forma en que quedó ordenada.

Código Javascript:

Ver original//Luego del reordenamiento
var reemplazo = [$("#list").html()];
 
//Reemplazo el contenido
datos.contenido = reemplazo;
 
//Y lo guardo
localStorage.lista = JSON.stringify(datos);

Saludos