LocalStorage on Vite gets cleared on every refresh

[Jupkobe]

LocalStorage on Vite gets cleared on every refresh

I am doing a Todo app where users' data(todos) will be stored on localStorage and display the data when page is refreshed or reopened. But I had this issue that when user refreshes page, localStorage gets cleared. I couldn't be able to solve the problem no matter what I tried. I am pretty sure that my code is not the problem because I copied my components and stuff to newly created create-react-app project and it worked. Then I copied the same files to newly created Vite project and same problem happened again.

I installed Vite with React framework and selected only JavaScript and then I installed Tailwindcss.

Reproduction

https://github.com/Jupkobe/vite-localstorage-bug

Steps to reproduce

npm install
npm run dev

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i5-10300H CPU @ 2.50GHz
    Memory: 7.35 GB / 15.87 GB
  Binaries:
    Node: 21.0.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.3570.0), Chromium (118.0.2088.76)
    Internet Explorer: 11.0.19041.3570
  npmPackages:
    @vitejs/plugin-react: ^4.0.3 => 4.1.0
    vite: ^4.4.5 => 4.5.0

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.