Programando PHP: localStorage

Mostrando entradas con la etiqueta localStorage. Mostrar todas las entradas

Cookies: Guardar localstorage en cookies


  function setCookieLSG(name,value,days) {

       var expires = "";

       if (days) {

              var date = new Date();

              date.setTime(date.getTime() + (days*24*60*60*1000));

              expires = "; expires=" + date.toUTCString();

       }

       document.cookie = name + "=" + (value || "")  + expires + "; path=/";

}

  

  localStorage.loquesea = 1;

    setCookieLSG('loquesea', '1', 700);

Y luego en el PHP:


  if (!isset($_COOKIE["loquesea"])) {

      ...

  }

Guardar objetos en localStorage

index.html:


<!DOCTYPE html>

<html>

<head>

 <meta charset="iso-8859-1">

</head>

<body>

 <script src="app.js"></script>

</body>

</html>

app.js:


putLocalstorage();

getLocalStorage();



function getLocalStorage() {

 if (localStorage.getItem("nombre")) {

  nombre = localStorage.getItem("nombre");

  console.log("El nombre es: "+nombre);

 }

 else {

  console.log("No existe nombre");

 }

 if (localStorage.getItem("persona")) {

  persona = JSON.parse(localStorage.getItem("persona")); // conv el string en un objeto

  console.log("La persona es: ");

  console.log(persona); // mostrar todo el objeto

  console.log(persona.edad); // mostrar un elemento concreto del objeto

 }

 else {

  console.log("No existe la persona");

 }

}



function putLocalstorage() {

 persona = {

  nombre: "Pepito Pérez",

  edad: 41,

  email: "prueba@gmail.com",

  coords: {

   lat: 10,

   lng: -10

  }

 };

 

 nombre = "Fernando Fernández";

 localStorage.setItem("nombre", nombre);

 

 // en localStorage solo se pueden almacenar string por lo que hay q convertir el objeto a string

 localStorage.setItem("persona", JSON.stringify(persona));

}

HTML5 Web Storage

Web Storage es una herramienta que mejora las Cookies. Está compuesto por sessionStorage y localStorage.

sessionStorage almacena información SOLO mientras esté la ventana abierta, en el momento que se cierre se perderá la información (al contrario que localStorage que no se perderá nunca incluso aunque se reinicie el ordenador o pasen meses).

Para almacenar datos en sessionStorage puede ser una simple variable:


sessionStorage.mi_variable = 1

valor =  sessionStorage.mi_variable + 15;

O un item compuesto por clave y valor:


sessionStorage.setItem(clave, valor); // si la clave ya existiese pues se actualiza con el nuevo valor

Para rescatar el valor del item sería:


valor = sessionStorage.getItem(clave);

También se puede hacer más fácil directamente así:


sessionStorage[clave] = valor;

valor = sessionStorage[clave];

Para obtener todas las claves guardas en sessionStorage:


for (var i=0;i<sessionStorage.length;i++) {

   clave =  sessionStorage.key(i);

   ....

}

EJEMPLO BASICO:


<div id="zona_carga">

</div>



<script>

sessionStorage.mi_variable = 15;

sessionStorage["casablanca"] = "Michael Curtiz";

sessionStorage["Lo que el viento se llevo"] = "Victor Fleming";

sessionStorage["Ciudadano Kane"] = "Orson Welles";



html = '';

for (i=0; i<sessionStorage.length;i++) {

    clave = sessionStorage.key(i);

    html += clave+" vale "+sessionStorage[clave]+"<br>";

    

}

document.getElementById("zona_carga").innerHTML = html;

</script>

Con localStorage exactamente todo IGUAL solo que cambiando sessionStorage por localStorage.

La diferencia entre localStorage con sessionStorage es que en la de sessionStorage cuando se cierra el navegador se pierden todo lo almacenado.

Más información en: http://www.w3schools.com/html/html5_webstorage.asp

Para borrar todas las claves:


localStorage.clear();

Para borrar una concreta:


localStorage.removeItem(key);

Para ver el contenido de las variables en la consola (por ejemplo en el Chrome):


Pestaña "Application" -> Storage -> LocalStorage

ccc

Cookies: Guardar localstorage en cookies

Guardar objetos en localStorage

HTML5 Web Storage