How to get access of "localStorage and sessionStorage" in Shopify app (have Checkout UI extensions)

Shopify Apps

Topic summary

A developer is building a Shopify app with a checkout UI extension and needs to access localStorage from their main website during checkout. They successfully implemented the useEmail hook to track email changes but encounter errors when attempting to read localStorage values.

Core Problem:

  • Checkout UI extensions run inside Web Workers, which cannot access browser localStorage or DOM objects (window, document)
  • The developer stores a “Sponsor Id” on a custom page and wants to retrieve it at checkout to pass to an API alongside user email
  • Attempts to use the “node-localstorage” package failed

Key Constraint:

  • Custom JavaScript in checkout.liquid is deprecated, limiting workaround options

Potential Solution:

  • One commenter suggests using Shopify’s useStorage() hook (currently in unstable API docs), which may provide an alternative storage mechanism compatible with checkout extensions

Status: The discussion remains open with one user asking if a workaround was found, indicating the issue is unresolved.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hello Everyone,

Let me directly get to my issue. I have created a new Shopify application with a checkout UI extension.

My Goal:- I want to read a value from the browser’s localStorage of my website, if user email changes on the checkout page.

What I have done so far?

I have already used the “useEmail” custom React Hook that Shopify gives to us - https://prnt.sc/RGVQ2nmEyLwg.

import { useEmail } from "@shopify/ui-extensions-react/checkout";

Though I am successfully able to read the user email, when entered or changed it on the Shopify checkout page.

Issue:-

But now, I also want to read a particular “value” saved in my localStorage. And when I try to write something like this:-

localStorage.getItem('myValue');

I get this error in the console (localStorage is not defined):- https://prnt.sc/kjWWL1yG0Tpm

The same thing happened to me earlier also, when I try to access window, document, etc. I think this piece of code I have written into my Shopify app is executed on the server, while these are client-side things. I have also tried installing this package “node-localstorage”, but still no luck.

Please help me access these into my app, or tell me if any other way is there. The main thing I am doing all this stuff is I can not write “Custom Javascript Code” into my checkout.liquid file as it is depreciated soon.

Thanks!

2

Checkout UI extensions run inside of a Web Worker, so you can’t access localStorage.

Why do you want to set value in localStorage?

Please check this Stackoverflow post to see what you can access from a web worker.

3

In my Shopify site, I have a custom page where I am saving “Sponsor Id” in localStorage and somehow on the final checkout page. I want to read that value and pass into API, the reason I want to call it on checkout page is that, I will pass user email also along with that.

So, I want to read that value from localStorage somehow on page load and call the API. But I am not able to read the local Storage.

4

did you find a workaround to this issue ?

1 Like
5

There’s another hook called useStorage() (Dev Docs)
This might serve your purpose