https://cacauet.org/wiki/index.php?title=LocalStorage_en_Javascript&feed=atom&action=history
LocalStorage en Javascript - Historial de revisió
2024-03-29T07:15:13Z
Historial de revisió per a aquesta pàgina del wiki
MediaWiki 1.34.0
https://cacauet.org/wiki/index.php?title=LocalStorage_en_Javascript&diff=2658&oldid=prev
Enric a 18:18, 4 maig 2015
2015-05-04T18:18:39Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="ca">
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">← Versió més antiga</td>
<td colspan="2" style="background-color: #fff; color: #222; text-align: center;">Revisió del 18:18, 4 maig 2015</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l3" >Línia 3:</td>
<td colspan="2" class="diff-lineno">Línia 3:</td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Alguna referència: http://www.w3schools.com/Html/html5_webstorage.asp</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>Alguna referència: http://www.w3schools.com/Html/html5_webstorage.asp</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'>−</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Funcions típiques:</div></td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Funcions típiques <ins class="diffchange diffchange-inline">(funciona similar a un diccionari)</ins>:</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> window.localStorage.addItem( key, val )</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> window.localStorage.addItem( key, val )</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> window.localStorage.removeItem( key )</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> window.localStorage.removeItem( key )</div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> window.localStorage.getItem( key )</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> window.localStorage.getItem( key )</div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"> window.localStorage.length</ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"></ins></div></td></tr>
<tr><td colspan="2"> </td><td class='diff-marker'>+</td><td style="color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Podem utilitzar <code>localStorage.length</code> per recórrer tots els elements de la memòria interna.</ins></div></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"></td></tr>
<tr><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td><td class='diff-marker'> </td><td style="background-color: #f8f9fa; color: #222; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>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.</div></td></tr>
</table>
Enric
https://cacauet.org/wiki/index.php?title=LocalStorage_en_Javascript&diff=2657&oldid=prev
Enric: Es crea la pàgina amb «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 emmagatzema...».
2015-05-04T17:45:37Z
<p>Es crea la pàgina amb «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 emmagatzema...».</p>
<p><b>Pàgina nova</b></p><div>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].<br />
<br />
Alguna referència: http://www.w3schools.com/Html/html5_webstorage.asp<br />
<br />
Funcions típiques:<br />
window.localStorage.addItem( key, val )<br />
window.localStorage.removeItem( key )<br />
window.localStorage.getItem( key )<br />
<br />
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.<br />
JSON.stringify( objecte )<br />
JSON.parse( string )<br />
<br />
Codi d'exemple:<br />
<br />
<syntaxhighlight lang="javascript"><br />
var tasques = []<br />
/* init */<br />
var ts = window.localStorage.getItem("tasques")<br />
if( ts )<br />
// carreguem dades inicials<br />
tasques = JSON.parse( ts )<br />
else<br />
// inicialitzem array tasques (nomes primer cop)<br />
window.localStorage.setItem( "tasques", JSON.stringify(tasques) )<br />
<br />
function grava() {<br />
var task = document.forms[0]["task"].value<br />
tasques.push( task )<br />
// no podem entrar un array per les bones. cal codificar-lo en JSON<br />
window.localStorage.setItem( "tasques", JSON.stringify(tasques) )<br />
}<br />
<br />
function carrega() {<br />
var llista = document.getElementById("llista")<br />
llista.innerHTML = "" //buidem llista<br />
tasques = JSON.parse( window.localStorage.getItem("tasques",tasques) )<br />
for( var i in tasques ) {<br />
var elem = document.createElement("li")<br />
elem.innerHTML = tasques[i]<br />
llista.appendChild( elem )<br />
}<br />
}<br />
<br />
function esborra_tot() {<br />
tasques = []<br />
window.localStorage.setItem( "tasques", JSON.stringify(tasques) )<br />
}<br />
</syntaxhighlight><br />
<br />
<syntaxhighlight lang="xml"><br />
<html><br />
<head><br />
<script>//...script anterior...<br />
</script><br />
</head><br />
<br />
<body onload="carrega()" ><br />
<form onsubmit="return false;"><br />
<h2>Todo list</h2><br />
New task:<br />
<input type="text" name="task" /><br />
<input type="submit" onclick="grava();carrega();return false;" /><br />
</form><br />
<button onclick="esborra_tot();carrega()">Esborra-ho tot</button><br />
<h3>Tasks to do:</h3><br />
<ul id="llista"><br />
</ul><br />
</body><br />
<br />
</html><br />
</syntaxhighlight></div>
Enric