How to listen to localstorage value changes in react?

by

The current answers are overlooking a really simple and secure option: window.dispatchEvent.

Where you set your localStorage item, if you dispatch an event at the same time then the eventListener in the same browser tab (no need to open another or mess with state) will also pick it up:

const handleLocalStorage = () => {
    window.localStorage.setItem("isThisInLocalStorage", "true");
    window.dispatchEvent(new Event("storage"));
};

window.addEventListener('storage', () => {
    console.log("Change to local storage!");
    // ...
})

EDIT:

Because this seems to be helpful, I’d also recommended checking out the useLocalStorage hook from the usehooks-ts team. You don’t need to install it as a package; you can just copy the hook wholesale. This hook makes use of the solution I originally shared, but adds a whole lot more sophisticated logic to it.

More Related Contents:

  1. onKeyDown event not working on divs in React
  2. React – “localStorage is not defined” error showing
  3. ReactJS giving error Uncaught TypeError: Super expression must either be null or a function, not undefined
  4. Nesting Routes in react-router v4
  5. Warning: Text content did not match. Server: “I’m out” Client: “I’m in” div
  6. Typescript input onchange event.target.value
  7. How do I restrict the type of React Children in TypeScript, using the newly added support in TypeScript 2.3?
  8. ReactJS: Warning: setState(…): Cannot update during an existing state transition
  9. Do I have to store tokens in cookies or localstorage or session?
  10. How to create unique keys for React elements?
  11. In React ES6, why does the input field lose focus after typing a character?
  12. Use custom build output folder when using create-react-app
  13. How do I access refs of a child component in the parent component
  14. What does ‘Only a ReactOwner can have refs.’ mean?
  15. React onClick and preventDefault() link refresh/redirect?
  16. Axios get in url works but with second parameter as object it doesn’t
  17. How to tell webpack dev server to serve index.html for any route
  18. How to debug react native apps in visual studio code?
  19. Importing images in TypeScript React – “Cannot find module”
  20. How do I convert a string to jsx?
  21. Warning: It looks like you’re using the development build of the Firebase JS SDK
  22. react app showing empty page when redirecting on production build
  23. What is the difference between componentWillMount and componentDidMount in ReactJS?
  24. Read the current full URL with React?
  25. Jest setup “SyntaxError: Unexpected token export”
  26. React functions inside render()
  27. How to nest routes in React Router v4?
  28. What is the best way to trigger change or input event in react js
  29. Material-Ui TextField not affected with the RTL direction
  30. How to update Firebase data to the React application in realtime

Leave a Comment