I try to create in Stencil.js a modal component. It has text and a closing button. After closing, I want to persist the state in the session storage, so that the modal will not be seen in this session anymore.

I kept track of which is which modal, by passing an id-prop, where I implemented the component.

My goal is, that no id needs to be passed via html attribute, but is created in component and stored in the sessionStorage (uuid: 0), which increments, when a new component is instanced. . My problem is, that after a reload, the uuid keeps incrementing, but by the component id and the one in the sessionStorage differ ...

Is there a way, to solve that probelm (hope it make) sense.

Here is a fragement of the component, the function which runs on component 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));
    }