Session storage woes

Ask the community
,
1

Hi All.

I am having difficulty trying to find a way to save an array in my page code, and then have it readable and writable from within my custom element. I have test code that saves and retrieves an array from session storage using the Wix storage API that works:

import {session} from 'wix-storage';
session.clear();

let myArray = ["one", "two", "three", "four"];

$w.onReady(function () {
  $w('#bStore').onClick(fStoreArray);
  $w("#bRetrieve").onClick(fRetrieveArray);
});

function fStoreArray() {
  session.setItem("myArray", JSON.stringify(myArray));  
}

function fRetrieveArray() {
 let array = JSON.parse(session.getItem("myArray"));
  console.log(array);
}

and I also have test code that saves and retrieves an array from the standard Web storage API in a custom element that works:

class StorageTesting extends HTMLElement {
  connectedCallback() {
    let myArray = ["one", "two", "three", "four"];
    sessionStorage.setItem("myArray", JSON.stringify(myArray));
    this.innerHTML = JSON.parse(sessionStorage.getItem("myArray"));
  }
}
customElements.define('storage-testing', StorageTesting);

What I cannot figure out is how to connect the two together. Can someone please explain how to do this? I cannot use wix-storage in the custom element due to the fact it can only be used in front-end code, and I cannot seem to get sessionStorage to work in my page code. For example:

function fStoreArray() {
 //session.setItem("myArray", JSON.stringify(myArray));
  sessionStorage.setItem("myArray", JSON.stringify(myArray));
}

results in the error “sessionStorage is not defined.”

2

Use session .getItem(“array”)