How to save localstorage per story

[israelKusayev]

Is it possible to save something to localStorage/sessionStorage per story and/or per stories file?

Is there any addon for this, I can't find any

I would expect something like

Default.parameters = {
	sessionStorage: {
		userId: '123'
	}
};

[iambumblehead]

one, set localstorage using a decorator,

STORY.decorators = [ () => {
  window.localStorage.setItem( 'key', 'value' );
  return { template: '<story />' };
} ];

or, two, set localstorage using a loader,

STORY.loaders = [ () => {
  window.localStorage.setItem( 'key', 'value' );
} ];

The "loader" can be defined as an async function while the "decorator" must be synchronous. Any localStorage definition will perist across stories, so it may be necessary to explicitly redefine localStorage for each story.

[boylec]

Easy way to reset local storage for every story

// in preview.tsx

const localStorageResetDecorator: DecoratorFn = (Story) => {
  window.localStorage.clear();
  return <Story />;
};

export const decorators: DecoratorFn[] = [
   localStorageResetDecorator,
];

[artyrcheek]

Another option is to use a loader
Here is a function I have for loading session storage into a story

function sessionStorageLoader(storage) {
  return async () => {
    Object.entries(storage).forEach(([key, value]) => {
      sessionStorage.setItem(key, JSON.stringify(value));
    });
  };
}

A pattern I find myself using is to clear the session storage keys I will be using in the default story, then override them for specific stories. e.g.

export default {
  title: "Methods/Datepicker",
  component: Datepicker,
  loaders: [
    sessionStorageLoader({ startDate: null }),
  ],
}

export const WithDateSelected = {
  loaders: [
    sessionStorageLoader({ startDate: "2025-01-01 }),
  ],
};