Web Storage es una característica de HTML5 que le permite almacenar datos en el lado del cliente, persistiendo incluso cuando el usuario cierra el navegador. Hay dos tipos de Almacenamiento Web: localStorage y sessionStorage . A continuación se muestran algunas formas de utilizar el almacenamiento web en HTML5:

1. Almacenamiento de datos:

   Puede almacenar pares clave-valor utilizando setItem métodos:

    javascript
    // Using localStorage
   localStorage.setItem('key', 'value');
   
   // Using sessionStorage
   sessionStorage.setItem('key', 'value');
   

2. Recuperando datos:

   Recupere los datos almacenados utilizando el método getItem :

    javascript
    // Using localStorage
   var storedValue = localStorage.getItem('key');
   
   // Using sessionStorage
   var storedValue = sessionStorage.getItem('key');
   

3. Eliminación de datos:

   Puede eliminar un elemento específico utilizando el método removeItem :

    javascript
    // Using localStorage
   localStorage.removeItem('key');
   
   // Using sessionStorage
   sessionStorage.removeItem('key');
   

4. Borrar todos los datos:

   Para borrar todos los datos almacenados, puede utilizar el método clear :

    javascript
    // Using localStorage
   localStorage.clear();
   
   // Using sessionStorage
   sessionStorage.clear();
   

5. Manejo de eventos de almacenamiento:

   Puede escuchar los cambios en el almacenamiento con el evento storage :

    javascript
    window.addEventListener('storage', function (e) {
       // Handle storage changes here
   });
   

   Este evento se activa cada vez que se modifica localStorage o sessionStorage en otra ventana o pestaña.

6. Comprobando soporte:

   Antes de utilizar Web Storage, es una buena idea comprobar si el navegador lo admite:

    javascript
    if (typeof(Storage) !== 'undefined') {
       // Web Storage is supported
   } else {
       // Web Storage is not supported
       // Handle the lack of support accordingly
   }
   

7. Usando JSON para datos complejos:

   Web Storage almacena datos como cadenas, por lo que si desea almacenar objetos complejos, puede usar JSON.stringify y JSON.parse :

    javascript
    var complexObject = { key: 'value', nested: { prop: 'nestedValue' } };
   
   // Store complex object
   localStorage.setItem('complexObject', JSON.stringify(complexObject));
   
   // Retrieve complex object
   var retrievedObject = JSON.parse(localStorage.getItem('complexObject'));
   

Recuerde que si bien el almacenamiento web es una forma conveniente de almacenar pequeñas cantidades de datos en el lado del cliente, no es adecuado para almacenar información confidencial debido a su accesibilidad a los scripts del lado del cliente. Para opciones de almacenamiento más seguras, considere usar cookies o almacenamiento del lado del servidor.