LocalStorage en Javascript

De Cacauet Wiki
Dreceres ràpides: navegació, cerca

localStorage és una base de dades tipus key/value interna dels navegadors (oju, en altres entorns no existeix o pot funcionar diferent) i que permet emmagatzemar variables internes a les aplicacions en [Javascript].

Alguna referència: http://www.w3schools.com/Html/html5_webstorage.asp

Funcions típiques (funciona similar a un diccionari):

window.localStorage.addItem( key, val )
window.localStorage.removeItem( key )
window.localStorage.getItem( key )
window.localStorage.length

Podem utilitzar localStorage.length per recórrer tots els elements de la memòria interna.

Una BBDD key/value només ens permet guardar estructures simples (strings, int, float). Si volem podem emmagatzemar un array o un diccionari (JS object) cal utilitzar la llibreria JSON per serialitzar-ho.

JSON.stringify( objecte )
JSON.parse( string )

Codi d'exemple:

        var tasques = []
        /* init */
        var ts = window.localStorage.getItem("tasques")
        if( ts )
            // carreguem dades inicials
            tasques = JSON.parse( ts )
        else
            // inicialitzem array tasques (nomes primer cop)
            window.localStorage.setItem( "tasques", JSON.stringify(tasques) )
 
        function grava() {
            var task = document.forms[0]["task"].value
            tasques.push( task )
            // no podem entrar un array per les bones. cal codificar-lo en JSON
            window.localStorage.setItem( "tasques", JSON.stringify(tasques) )
        }
 
        function carrega() {
            var llista = document.getElementById("llista")
            llista.innerHTML = "" //buidem llista
            tasques = JSON.parse( window.localStorage.getItem("tasques",tasques) )
            for( var i in tasques ) {
                var elem = document.createElement("li")
                elem.innerHTML = tasques[i]
                llista.appendChild( elem )
            }
        }
 
        function esborra_tot() {
            tasques = []
            window.localStorage.setItem( "tasques", JSON.stringify(tasques) )
        }
<html>
<head>
    <script>//...script anterior...
    </script>
</head>
 
<body onload="carrega()" >
    <form onsubmit="return false;">
        <h2>Todo list</h2>
        New task:
        <input type="text" name="task" />
        <input type="submit" onclick="grava();carrega();return false;" />
    </form>
    <button onclick="esborra_tot();carrega()">Esborra-ho tot</button>
    <h3>Tasks to do:</h3>
    <ul id="llista">
    </ul>
</body>
 
</html>