Store and retrieve variable containing HTML list using localStorage

Asked

Viewed 5,498 times

1

I have a project and I’m using localStorage as a database. I use this to save a list that the user can edit and add like this:

localStorage.setItem(local, $("#lista").html());

In html it looks like this:

<ul data-role="listview" contenteditable="true"  id="lista">
   <li></li>      
</ul>

My need is to retrieve each information between each li in variables or even a array.

When it saves, the navigator shoves html in itself... and puts class there read. ai using:

var teste = lista.split(/<li class="ui-li ui-li-static ui-body-c">|<\/li>|¤/);

To return each value within each li.

Only when recovering using teste[1], teste[2]... works in half.

For example: Value saved in full before the split:

,test1,,teste2,teste3,,teste4,

Then I use teste[1] or teste[3] it returns correctly. When use teste[2] he returns nothing.

If anyone has any solution. replaceAll is not compatible with my project.

PAGE THAT RECEIVES THE VALUE:

<!DOCTYPE HTML>
<head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="teste.js"></script>
</head>
<body>
    <button onClick="att()">Mostrar</button>
    <div id="boxgeral">BOX GERAL</div>
</body>

</html>

PAGE THAT SAVES VALUE:

<!DOCTYPE HTML>
<head>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="teste.js"></script>
</head>
<body>
    <input type="text" name="titulo2" id="titulo2" value="" placeholder="Titulo" />
     <h5> Opções:  </h5> 
    <ul data-role="listview" contenteditable="true" id="lista">
        <li></li>
    </ul>
    <button id="salvar">Salvar</button>
    <button id="limpar">Deletar</button>
</body>
</html>

Javascript code:

var pag = 'pag1';
var titulo = localStorage.getItem(pag);
var lista = localStorage.getItem(titulo);


$(function () {

    $("#salvar").click(function () {
        var local = document.getElementById('titulo2').value;
        localStorage.setItem(pag, local);
        localStorage.setItem(local, $("#lista").html());

    });


    if (localStorage.getItem(titulo)) {

        $("#lista").html(localStorage.getItem(titulo));
        document.getElementById('titulo2').value = titulo;

    }

    $("#limpar").click(function () {
        localStorage.removeItem(titulo);
        localStorage.removeItem(lista);

        alert(localStorage.getItem(titulo));
        alert(localStorage.getItem(lista));

        window.location = window.location;
    });
});



function att() {

    var teste = lista.split(/<li class="ui-li ui-li-static ui-body-c">|<\/li>|¤/);

    alert(teste);
}
javascript jquery localstorage

  • Post an excerpt of code that you can reproduce there, otherwise we will have to write an HTML, function and etc just to help you... If you can post all your HTML there or something we can copy and play without much work.

  • Hi Paulo, I’m new here and I’m lost in this format wave. I had to add a demo page here and put the links.. pq to put the code was formatting in half.. , anyway, take a look.

1 answer

1


I suggest you record on localStorage with an object that represents the HTML instead of saving the whole HTML. You can do something like this:

var conteudo = $("ul#lista > li").map(function(){
    return {
       classes: this.className,
       html: this.innerHTML
    } 
}).get();

and then you use:

localStorage.setItem(local, JSON.stringify(conteudo));

To recover you can use:

var json = localStorage.getItem(titulo);
var lis = $(JSON.parse(json)).map(function(){
    var li = document.createElement('li');
    li.className = this.className;
    li.innerHTML = this.html
    return li;
});
$("#lista").append(lis);

This way you have the elements li separated into objects and is easier to deal with.

Note:

I don’t quite understand the logic you want to use with titulo but if each li has its own title you can add this to the object above.

  • 1

    Perfect, that’s what I wanted. I had to add $( ".li" ).remove(); when retrieving the code, pos, it recovered along with what was present in html. I could always save a blank read. * the logica amigo, is that it receives an id for another page, so it can have several databases, just change the id, and allows me to save a page zeroed... just by the id already saved, it retrieves the li of that id. is pq summarized the code. grateful.

  • @Great felipelion that helped. If you want you can also use like this: $("#lista").empty().append(lis);

  • @Felipelion made a change, I noticed that the string was with unnecessary jQuery content. Try adding this: http://answall.com/posts/90597/revisions

  • 1

    That’s right Yes, I already tested the application and it worked, I was using Lert to check what was being saved kkk rs. Thanks.

  • @Great felipelion! I had forgotten this detail that converts to a native array.

Browser other questions tagged javascript jquery localstorage

You are not signed in. Login or sign up in order to post.