> Faqs > Cómo cargar un valor de forma persistente para inicializarlo con el último valor introducido en Lit

Cómo cargar un valor de forma persistente para inicializarlo con el último valor introducido en Lit

Tengo un componente realizado con Lit con este código:

import { LitElement, html, css } from 'lit';

export class SearchImages extends LitElement {
  static styles = [
    css`
      :host {
        display: block;
      }
      
    `
  ];

  static get properties() {
    return {
      order: { type: String },
    };
  }

  constructor() {
    super();
    this.images = [];
    this.order = 'default'
  }

  firstUpdated() {
    //
  }

    // ...
}
customElements.define('search-images', SearchImages);

He eliminado las partes no relevantes para no causar ruido.

La idea es que cuando hago el this.order = 'default' en el constructor se memorice ese valor de manera persistente para el usuario. Hay varios tipos de órdenes, quiero que recuerde el valor que se introduce por última vez.

Editar
Responder la pregunta
Agustín
255 6 15 14

Respuestas

Lit no implementa de casa ningún mecanismo para persistir un valor en sucesivos accesos a la misma página, pero en el navegador tienes el localStorage para conseguirlo. Por tanto, simplemente necesitas un poco de javascript.

Para obtener el valor del orden que se haya marcado anteriormente por el mismo usuario y navegador podrías hacer un constructor con esta forma.

constructor() {
    super();
    this.games = [];
    const storedOrder = localStorage.getItem('site_images_order');
    this.order = storedOrder ? storedOrder : 'order';
}

La variable 'site_images_order' es la que estás guardando en el local storage.

Por supuesto cuando esa variable de orden tome un nuevo valor, deberías también actualizar el almacenamiento en el localstorage, para que se encuentre siempre actualizado al nuevo valor seleccionado por el usuario.

Imagina que tienes un manejador de evento que se invoca cuando cambia el orden en tu componente de búsqueda de imágenes. Ese manejador podría quedarte con un código como el que sigue.

orderChanged(e) {
    this.order = e.detail.value; // ESTO ME LO ESTOY INVENTANDO... TEN EN CUENTA QUE EL VALOR PUEDE LLEGAR DE OTRO MODO
    localStorage.setItem('site_images_order', this.order);  // Guardar el valor nuevo en el localStorage
}

Espero que esto te pueda ayudar a resolver tu problema de almacenamiento persistente del valor de la propiedad order en Lit.

Miguel Angel
3280 145 214 17
Aportar una respuesta