In short: storing the token in HttpOnly cookies mitigates XSS being used to get the token, but opens you up to CSRF, while the reverse is true for storing the token in localStorage.

That means if an attacker can inject some JavaScript code that runs on the web app’s domain, they can steal all the data in localStorage. The same is true for any third-party JavaScript libraries used by the web app. Indeed, any sensitive data stored in localStorage can be compromised by JavaScript. In particular, if an attacker is able to snag an API token, then they can access the API masquerading as an authenticated user.

But there’s a drawback that I didn’t like about this option: localStorage is vulnerable to Cross-site Scripting (XSS) attacks.

So here’s the question: Where do you store the token in the browser so that the token survives browser reloads? The off-the-cuff answer is localStorage because it’s simple and effective:

try { const value = await localforage.getItem('somekey'); // This code runs once the value has been loaded // from the offline store. console.log(value); } catch (err) { // This code runs if there were any errors. console.log(err); }

sessionStorage (a storage that persists for duration of the session, comparable to session cookies)

localStorage (a persistent storage, which can be compared to persistent cookies)

The Web Storage API provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

React will update state throughout the user’s session. localStorage won’t change.When the user ends their session, save whatever the state is at that time to localStorage, making it available for hydrating in the next session.

So rather than continuously keeping localStorage in-sync with React state, let’s simply save state to localStorage whenever the user ends their session, either by leaving the app (‘unmounting’ the component) or refreshing the page.

Because localStorage can only store strings, arrays and objects need to be passed into JSON.stringify() before being passed to setItem().

Saving form data across sessions — what do people hate more than filling out a form? Filling out a form twice!

Experiment with different states while developing — When working on an app, it’s often useful or necessary for the app to have a certain state to be able to work on particular styling and functionality, (e.g. styling a list of items and removing items requires items). Rather than recreating an app’s state on every refresh, Local Storage can persist that state, making development much more efficient and enjoyable.

A simple, fake backend for your frontend React projects — It’s often nice to add the appearance of a backend/database to your frontend portfolio projects. The extra functionality will take your app to the next level, improve the user experience and impress potential employers.

set(key, v) { localStorage.setItem(key, JSON.stringify(v)) store.set(key, v) return v },

const store = observable({ players: [ "Player 1", "Player 2", ], // ... }) reaction(() => JSON.stringify(store), json => { localStorage.setItem('store',json); }, { delay: 500, }); let json = localStorage.getItem('store'); if(json) { Object.assign(store, JSON.parse(json)); }

localForage is a JavaScript library that improves the offline experience of your web app by using an asynchronous data store with a simple, localStorage-like API. It allows developers to store many types of data instead of just strings.