The tradeoffs of each approach

localStorage is perfect for single-page apps that talk to an API. It is the right default for the frontend you are building right now. When you move to Next.js with Server Components and Server Actions, httpOnly cookies become the better choice because the server can read them during SSR and the client cannot.

Quick comparison. localStorage is simple, works everywhere, and is vulnerable to XSS. httpOnly cookies are safer against XSS, work with SSR out of the box, and need CSRF protection. Neither is better universally. The right answer depends on whether you are rendering on the server or not.

Next up you move into React. Components, hooks, state, and the declarative model that replaces all the imperative DOM juggling you have been doing so far. The token handling you just built will come back in a Context provider that makes the token available to every component.