Intento crear en Stencil.js un componente modal. Tiene texto y un botón de cierre. Después de cerrar, quiero conservar el estado en el almacenamiento de la sesión, para que el modal ya no se vea en esta sesión.

Mantuve un registro de cuál es qué modal, pasando un id-prop, donde implementé el componente.

Mi objetivo es que no sea necesario pasar ninguna identificación a través del atributo html, sino que se crea en el componente y se almacena en sessionStorage (uuid: 0), que se incrementa cuando se instancia un nuevo componente. . Mi problema es que, después de una recarga, el uuid sigue incrementándose, pero la identificación del componente y la del almacenamiento de sesión difieren...

¿Hay alguna manera de resolver ese problema (espero que tenga) sentido?

Aquí hay un fragmento del componente, la función que se ejecuta en el componente init:

 connectedCallback() { const readSession = JSON.parse(sessionStorage.getItem('componentsState')); const initSession = { uuid: 0, }; if (!readSession) { sessionStorage.setItem('componentsState', JSON.stringify(initSession)); this.popupuuid = initSession.uuid; } else { console.log(readSession); // if(this.popupuuid !== readSession.uuid) { // } readSession.uuid++; this.popupuuid = readSession.uuid; console.log(this.popupuuid); sessionStorage.setItem('componentsState', JSON.stringify(readSession)); }