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.”