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

Shopify Apps
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