Cómo Filtrar y Gestionar Datos del Local Storage en JavaScript

En este artículo, exploraremos cómo filtrar y gestionar datos almacenados en el Local Storage de tu navegador web utilizando un script JavaScript. Descubre cómo aplicar expresiones regulares para seleccionar datos específicos y cómo calcular el tamaño del Local Storage. ¡Optimiza tus proyectos web y ofrece a tus usuarios una experiencia más eficiente!

Introducción

Aprenderemos a utilizar un script JavaScript para filtrar datos en el Local Storage y calcular su tamaño. Estos conocimientos son esenciales para el desarrollo de aplicaciones web y pueden marcar la diferencia en la experiencia del usuario. Expliquemos el funcionamiento de este script de manera accesible y amigable.

Filtrando Datos del Local Storage

El primer script que vamos a explorar se utiliza para filtrar datos específicos en el Local Storage. Aquí está el código:

const re = /[a-zA-Z]/g;

Object.keys(localStorage).forEach(function (key) {
  if (key.match(re)) {
    // Realizar alguna acción
  }
});

Vamos a analizarlo paso a paso para comprenderlo a fondo:

1. const re = /[a-zA-Z]/g;: En esta línea, definimos una expresión regular que busca letras en mayúsculas y minúsculas. Este enfoque es fundamental para seleccionar datos específicos en el Local Storage.
2. Object.keys(localStorage).forEach(function (key) { ... });: Aquí, obtenemos las claves almacenadas en el Local Storage y las recorremos usando un bucle forEach. Es un paso importante para acceder a los datos que deseamos filtrar.
3. if (key.match(re)) { ... }: En cada iteración, comprobamos si la clave actual coincide con nuestra expresión regular utilizando el método match(). Si la clave contiene al menos una letra, ejecutamos un código personalizado dentro del bloque if.

Calculando el Tamaño del Local Storage

Añadiremos otro script que calcula el tamaño total del Local Storage y lo muestra en kilobytes (KB) o megabytes (MB). Aquí tienes el código:

var allStrings = '';
for (var key in window.localStorage) {
  if (window.localStorage.hasOwnProperty(key)) {
    allStrings += window.localStorage[key];
  }
}

let size = 3 + (allStrings.length * 16) / (8 * 1024);

if (size > 1024) {
  this.localStorageSize = Math.ceil(size / 1024) + ' MB';
} else {
  this.localStorageSize = allStrings
    ? Math.ceil(3 + (allStrings.length * 16) / (8 * 1024)) + ' KB'
    : '0 KB';
}

Este script recorre todas las claves del Local Storage, recopila sus valores y calcula el tamaño total en KB o MB. Esto es útil para monitorear y gestionar el espacio utilizado por tus datos almacenados en el navegador.

Uso y Personalización

Puedes personalizar estos scripts según tus necesidades. Además de realizar una «acción» en el primer script, ahora también puedes mostrar el tamaño total del Local Storage a tus usuarios. Esto es útil para mantener un control sobre el espacio de almacenamiento y tomar decisiones informadas.