Store and retrieve variable containing HTML list using localStorage

Question

Store and retrieve variable containing HTML list using localStorage

Navigation

#1 by (1 votes)

1

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

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

No html 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 an array .

When saved, the browser threads html itself ... and boots class there li. then 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 whole before process:

test1, test2, test3, test4,

Then I use teste[1] or teste[3] it returns correctly. When I use teste[2] it does not return anything.

If anyone has a 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 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>
    <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

asked by anonymous 04.10.2015 / 01:25

1 answer

Distorting an image using HTML 5 Canvas Use different symbols for points

score 1 · Accepted Answer

I suggest writing to localStorage with an object representing the HTML instead of writing the whole HTML. You can do something like this:

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

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);

In this way you have the li elements separated into objects and are easier to deal with.

Note:

I did not quite understand the logic you want to use with titulo but if every li has its own title you can add it to the object above.