Web Storage API & Safari

[nothingrandom]

Summary

Using the Web Storage API for persisting storage (specifically for browser extensions), @andyhails and I discovered that there is a bug in createJSONStorage for Safari that causes it to stringify and persist store functions (e.g. foo()) as objects (e.g. foo: {}).

This does not exist as an issue for Firefox, Chrome, or other Chromium browsers.

We found this bug to be extremely inconsistent between builds for Safari through xCode and throughout runtime, however, did find a fix through a custom createJSONStorage.

Proposal

Filter functions out from being in the persisted store. Zustand handles this just fine, combining the persisted store of strings, booleans, and objects with the non-persisted store which includes those functions no longer being persisted.

createJSONStorage.ts

import { PersistStorage, StateStorage, StorageValue } from 'zustand/middleware';
import { StoreState } from '@/store/index';

/**
 * createJSONStorage - our own version of zustand's createLocalStorage middleware.
 *
 * There is a bug in zustand's createLocalStorage middleware for Safari that causes it to stringify and
 * persist StateStore functions (e.g. foo()) as objects (e.g. foo: {}).
 *
 * Overriding the createJSONStorage middleware with our own version that filters out functions from the state
 * mitigates this issue.
 */

/**
 * Parses a string into a StorageValue.
 * @param str
 */
const parse = (str: string | null): StorageValue<StoreState> => (str ? JSON.parse(str) : null);

/**
 * Filters out properties that cannot be persisted to storage (e.g. functions).
 * This is usually handled by the browser well but for some reason in Safari there are side effects.
 *
 * @param state
 */
const statePropertiesOnly = (state: StoreState) =>
  Object.fromEntries(
    Object.entries(state)
      .filter(([_, value]) => typeof value !== 'function'),
  );

export default (getStorage: () => StateStorage): PersistStorage<StoreState> => ({
  getItem: name => {
    const item = getStorage().getItem(name);
    return item instanceof Promise ? item.then(parse) : parse(item);
  },
  setItem: (name, newValue: StorageValue<StoreState>) =>
    getStorage().setItem(name, JSON.stringify(statePropertiesOnly(newValue.state))),
  removeItem: name => getStorage().removeItem(name),
});

[dai-shi]

to stringify and persist store functions (e.g. foo()) as objects (e.g. foo: {}).

Thanks for reporting! Can you identify the problem?

This is what I tried:

Chrome

Safari

[dai-shi]

Maybe we do something before JSON.stringify.

[nothingrandom]

Annoyingly, maybe not. We attempted testing JSON.stringify and JSON.parse between Chrome and Safari, but didn't find anything that would specifically break this in a normal page.
I think it might be more related to the Web Storage API, and how Safari saves that between sessions.

If needed, I can get a mini-extension build working as a proof of the bug on this one.

[dai-shi]

So, can you reproduce the difference with the web storage api without zustand?

[andyleanlibrary]

Hi,
There are a few things we've noticed (I work with @nothingrandom):

1. It's only on extension and only using chrome.storage.local API
2. It SEEMS OK if using session storage.
3. It's not consistent! But what seems to happen is that functions are (weirdly) converted to objects. As you demonstrated above, JSON.stringify usually strips out these functions but it seems there are times when it does not.

[dai-shi]

Thanks for the details.
So, would partialize option be a workaround?

zustand/docs/integrations/persisting-store-data.md

Lines 80 to 86 in 58947a5

	### `partialize`
	> Type: `(state: Object) => Object`
	> Default: `(state) => state`
	Enables you to pick some of the state's fields to be stored in the storage.