LocalStorage en Javascript
La revisió el 18:18, 4 maig 2015 per Enric (discussió | contribucions)
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>
