I have 2 different pages each containing a custom HTML element. One of the pages is a lightbox. Both HTML elements have different UI and code that sends data back to the parent window using postMessage. Then there is page code for each page that listens for the messages from custom html element and sets the data into local storage using the same key. The code for getting and updating the data in local storage is all done in a public JS file using wix-storage, so it’s available to page code on any page.
Everything works fine except that it seems like each page is dealing with a different instance of the local storage object. local.getItem() is returning different things depending upon what page code it’s called from.
Here’s some code from the public JS file handling the local storage:
const localStorageKey = ‘itemList-v1’ ;
export const getList = () => {
const list = JSON.parse(local.getItem(localStorageKey) || ‘’ );
console.log( ‘getItem’ , list);
return list;
};
export const addToList = item => {
const list = getList();
list.push(item);
console.log( ‘setItem’ , list);
local.setItem(localStorageKey, JSON.stringify(list));
return list;
};