1

Necesito guardar la configuración o preferencias de usuario de una página web, algo así como lo haciamos en sistemas de escritorio con el '.ini' o en el registro de windows. Debería guardar parametros como; estilo y otros predeterminados, que se guardarían en el pc donde se ejecute la página o podría ser, también, por usuario.

¿Cuáles serían las opciones?

4
  • 1
    Que has intentado? Tienes algún error?
    – DjCrazy
    el 4 jun. 2019 a las 15:24
  • LocalStorage con javascript, si lo que quieres es preferencias locales, ahora bien si quiere que esas preferencias persistan en otro computador pues debes almacenarlas en tu base de datos. el 4 jun. 2019 a las 15:47
  • 1
    #DjCrazy $_SESSION y cookies pero los valores se pierden cuando se destruyen o caducan...
    – wings77
    el 4 jun. 2019 a las 16:12
  • depende que quieras guardar y donde, si quieres guardar en php lo que dice @JuanCarlos te servira, pero si quieres guardar datos en el cliente la respuesta de kleith te ayudara. el 4 jun. 2019 a las 16:29

1 respuesta 1

5

Se puede de diferentes maneras, siempre del lado del cliente, que sería desde javascript:

  • localStorage
  • cookies
  • sessionStorage

Definiciones

localStorage

El almacenamiento web puede verse de manera simplista como una mejora de las cookies, lo que proporciona una capacidad de almacenamiento mucho mayor. El tamaño disponible es de 5 MB, que es mucho más espacio para trabajar que una cookie típica de 4 KB. Los datos no se envían de nuevo al servidor para cada solicitud HTTP (HTML, imágenes, JavaScript, CSS, etc.), lo que reduce la cantidad de tráfico entre el cliente y el servidor.

Los datos almacenados en localStorage persisten hasta que se eliminan explícitamente. Los cambios realizados se guardan y están disponibles para todas las visitas actuales y futuras del sitio.

Funciona en la política del mismo origen. Por lo tanto, los datos almacenados solo estarán disponibles en el mismo origen.

Ejemplo

// seteo y almaceno en la variable miGato el valor Juan
window.localStorage.setItem('miGato', 'Juan');

// obtengo el valor de miGato
var gato = window.localStorage.getItem('miGato');

// lo muestro en el log
console.log(gato);

// elimino la variable miGato
window.localStorage.removeItem('miGato');

// elimino toda la data almacenada
window.localStorage.clear();

cookies

Podemos establecer el tiempo de caducidad de cada cookie.

El límite de 4K es para toda la cookie, incluido el nombre, el valor, la fecha de caducidad, etc. Para admitir la mayoría de los navegadores, mantenga el nombre bajo 4000 bytes y el tamaño total de la cookie bajo 4093 bytes.

Los datos se envían al servidor para cada solicitud HTTP (HTML, imágenes, JavaScript, CSS, etc.), lo que aumenta la cantidad de tráfico entre el cliente y el servidor.

Ejemplo

// función para setear cookies
function setCookie(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=/";
}

// función para obtener cookies
function getCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

// función para borrar cookies
function eraseCookie(name) {   
  document.cookie = name+'=; Max-Age=-99999999;';  
}

// uso

// nombre, valor, días para que expire
setCookie('miGato', 'Juan', 7);

var gato = getCookie('miGato');

console.log(gato);

// elimino la cookie
eraseCookie('miGato');

sessionStorage

Es similar al almacenamiento local.

Los cambios solo están disponibles por ventana (o pestaña en navegadores como Chrome y Firefox). Los cambios realizados se guardan y están disponibles para la página actual, así como para futuras visitas al sitio en la misma ventana. Una vez cerrada la ventana, se borra el almacenamiento.

Los datos solo están disponibles dentro de la ventana / pestaña en la que se configuró. Los datos no son persistentes, es decir, se perderán una vez que se cierre la ventana / pestaña. Como localStorage, funciona en la política del mismo origen. Por lo tanto, los datos almacenados solo estarán disponibles en el mismo origen.

Ejemplo

// seteo y almaceno en la variable miGato el valor Juan
window.sessionStorage.setItem('miGato', 'Juan');

// obtengo el valor de miGato desde sessionStorage
var gato = window.sessionStorage.getItem('miGato');

// lo muestro en el log
console.log(gato);

// elimino la variable miGato
window.sessionStorage.removeItem('miGato');

// elimino toda la data almacenada
window.sessionStorage.clear();

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.