Values from the store are cleared on page refresh (when trying to save `Set`)

[airen29]

Hi guys. I've got a little problem and I have no clue if I did not understand usage of the package properly or I am doing something wrong here.

I'm initializing default storage like this one:

import OptionsSync from 'webext-options-sync';

const DEFAULTS = {
  extensionEnabled: true,
  matchAutoAcceptInvite: false,
  notifyDisabled: false,
  updateNotificationType: 'tab',
  updateNotifications: [],
  hideSponsorMenu: false,
  teamProfileBasicInfo: false,
  playerProfileKeyPlayerNotification: true,
  hideDiscussionTopics: false,
  hiddenDiscussions: new Set(),
}

const storage = new OptionsSync({
  defaults: DEFAULTS,
  migrations: [OptionsSync.migrations.removeUnused]
})

export default storage;

And I am trying to push a new id to the Set and saving it with this one:

export default (discussionId) => {
  const handleClick = async event => {
    event.preventDefault();
    const { hiddenDiscussions } = await storage.getAll();
    hiddenDiscussions.add(discussionId);
    await storage.set({ hiddenDiscussions });
  };

  return (
    <img 
      src={deleteIcon}
      alt="Skryť tému"
      title="Skryť tému"
      style={{ verticalAlign: 'middle' }}
      height="13px"
      border="0"
      id={discussionId}
      onClick={handleClick}
    />
  )
}

When the handleClick is handled I see that storage wrote information in the console Object containing: hiddenDiscussions: Set [ "504390", "506620" ] but set hiddenDiscussions is completely missing in Without the default values object.

When I do navigate somewhere else or refresh the application, the Set is completely cleared and there are no values saved.

Is there any possibility to save them inside storage so if the application tab or window get restarted the settings are kept? I don't mind that if there is a new installation, the Set will be empty.

What I want to achieve is that user can select certain discussions (based on id) he can filter and extension will based on that Set of id's remove them from the DOM element. But current resetting of the storage keeps me from doing that :/

Thanks a lot for any help.

[fregante]

My guess is that you’re trying to save a Set object without first converting it to an array. That’s not supported by the underlying storage API so it’s invisibly ignored by the browser.

[airen29]

While I am trying to debug things I found out that problem might be related to saving.

I did a change in the code to:

    const { hiddenDiscussions } = await storage.getAll()
    storage.set({ [hiddenDiscussions]: hiddenDiscussions.add(discussionId) })

Then I see in the console info:

Without the default values:
"[object Set]": Set [ "504390", "506620" ]

And also hiddenDiscussions Set in the default have those values but once again, if the page is refreshed, then it's cleared out. I will try to debug it out for the weekend but if no, you're suggesting switching to Array?

[fregante]

you're suggesting switching to Array?

That's right, the console is just showing what you passed to it, but not what Chrome decides to save because there's no feedback from Chrome. This only becomes visible when you read the value from the storage and it's not there.

You have to use

const DEFAULTS = {
  extensionEnabled: true,
  matchAutoAcceptInvite: false,
  notifyDisabled: false,
  updateNotificationType: 'tab',
  updateNotifications: [],
  hideSponsorMenu: false,
  teamProfileBasicInfo: false,
  playerProfileKeyPlayerNotification: true,
  hideDiscussionTopics: false,
-  hiddenDiscussions: new Set(),
+  hiddenDiscussions: [],
}

If you want to have an array without duplicates, you'll have to convert it to Set and re-convert it to an array, for example:

    const { hiddenDiscussions } = await storage.getAll();
    const unique = new Set(hiddenDiscussions);
    unique.add(discussionId);
    await storage.set({ hiddenDiscussions: [...unique] });

[fregante]

Thanks for the issue! I added a mention about this limitation in the readme: https://github.com/fregante/webext-options-sync/blob/master/readme.md#simple-usage