Uso del LocalStorage con JavaScript

Ultima actualización en domingo 13º mar. 2022

localstorage

LocalStorage en el navegador

  • El almacenamiento local está integrado directamente en el navegador web, y existe como una propiedad en el objeto de ventana, el objeto global del navegador.
  • Los datos en el almacenamiento local del navegador duran entre las visitas al sitio e incluso después de que el navegador se haya cerrado.

Usos comunes para Local Storage.

  • Guarde las búsquedas más recientes que el usuario ha realizado en su sitio. Entonces podrías usar esos datos en otras páginas.
  • Guarde los datos de entrada del formulario no seguros a medida que el usuario lo ingresa, por lo que si el usuario navega fuera del formulario y regresa, no necesita comenzar de nuevo.
  • Guarde una lista de nombres de inicio de sesión que se han utilizado en el pasado para evitar que el usuario escriba.
  • El almacenamiento local le permite guardar las preferencias del usuario sin tener que restablecerlas cada vez que vuelve a abrir la aplicación.

javascript localstorage

Tenga en cuenta al usar local storage.

  • El almacenamiento local no es una forma segura de almacenar información. No es seguro almacenar información confidencial como contraseñas no cifradas, números de seguro social, fechas de nacimiento o números de tarjetas de crédito.
  • El almacenamiento local solo almacena datos de cadena. Por ejemplo, no puede almacenar archivos binarios como jpeg o una película.
  • Cuando se carga una página, los navegadores cargan los datos en el almacenamiento local de forma sincrónica. Si hay muchos datos que almacenar, los usuarios pueden experimentar un retraso durante ese tiempo.
  • El almacenamiento local es un gran activo para mejorar la usabilidad de su sitio.

Que es Local Storage

Access Local Storage con el localStorage property

Puede almacenar, recuperar y eliminar datos mediante métodos de almacenamiento local como setItem, getItem y removeItem.

  • La propiedad localStorage permite el acceso al objeto de almacenamiento del navegador para almacenar, actualizar y eliminar datos en las sesiones del navegador.
  • Podemos acceder al almacenamiento local con la palabra clave localStorage, que representa un objeto Storage donde los datos del navegador se almacenan como pares key/value.
	Storage {
  keyName : keyValue;
}
	
  • Si necesita almacenar otros tipos de datos, como objetos o matrices, en el almacenamiento local, debe convertirlos en una cadena mediante JSON.Stringify().

Almacenar artículos en Local Storage con setItem

  • El almacenamiento local se puede definir, recuperar y eliminar con sus propios métodos incorporados.
  • setItem(), que establece una propiedad en el objeto de almacenamiento local. Se necesitan dos parámetros, la clave y el valor del elemento que desea crear.
	localStorage.setItem('keyName', 'keyValue');
	

LocalStorage JavaScript

Recuperar un valor De Local Storage con getItem

  • El método getItem() acepta un parámetro, un nombre de clave en el almacenamiento local, y devuelve el valor de esa clave.
	localStorage.getItem('keyName');
	

Quitar un elemento en Local Storage con removeItem

  • El método removeItem() elimina un elemento determinado del objeto localStorage.
  • Acepta un parámetro, un nombre de clave, y elimina esa clave del objeto si existe.
	removeItem('itemName');
	

Store the recent searches in local storage Example

  • Recupera elementos de búsqueda del almacenamiento local y devuelve una matriz que contiene cada elemento.
	function getRecentSearches() {
  const searches = localStorage.getItem('recentSearches');
  if (searches) {
    return JSON.parse(searches);
  }
  return [];
}
	

JavaScript Guardar Datos

	searchForm.addEventListener('submit', () => {
  const searches = getRecentSearches();
  const searchString = searchBar.value;

  searches.push(searchString);
  // Set local storage item
  localStorage.setItem('recentSearches', JSON.stringify(searches));
  createItem(searchString);
});
	

Referencias

LocalStorage