Clearing of LocalStorage upon restarting the application

Currently, I am working on a project using Webpack in vsCode where I am storing objects in an array named taskList and saving it to localStorage. Whenever a user creates a new task, a new object called newAddition is created and added to the taskList array retrieved from localStorage on form submission (click event). The process works perfectly while the site is open; however, upon closing and restarting vsCode, my array disappears from localStorage.

const taskList = JSON.parse(window.localStorage.getItem("taskList"));
taskList.push(newAddition);
window.localStorage.setItem("taskList", JSON.stringify(taskList));

In my index.js file in Webpack, I have written code to handle retrieving taskList from localStorage or creating a new blank array if it doesn't exist on the first visit. Despite this setup, every time I restart vsCode, my array vanishes. Interestingly, if vsCode remains open and Firefox is restarted, the localStorage data persists. Can someone help me identify what might be going wrong?

const taskList = JSON.parse(window.localStorage.getItem("taskList"));

if (taskList === null) {
  const taskListcreate = [];
  localStorage.setItem("taskList", JSON.stringify(taskListcreate));
}

I'm wondering if there could be something in the default Webpack configuration (or webpack.config.js or package.json) causing the local storage to be cleared with each application restart. I cannot think of any changes that would lead to this behavior, but it seems like the only possible explanation for the data loss.

Answer №1

An issue arose due to the live-server extension in vsCode having a setting that assigns a new port each time it is launched. This results in a fresh localStorage session being created with every run on your machine.

To resolve this, navigate to the settings.json file within the live server extension and locate the following:

"liveServer.settings.port": 0,

Update the port value from 0 to 5500 as demonstrated below:

"liveServer.settings.port": 5500,

The original value of 0 instructs live-server to switch ports upon each launch, leading to empty values in localStorage due to vsCode accessing it via different ports. By specifying 5500, you ensure that port 5500 is consistently used for all sessions.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to insert a record into the rth column of the nth row in a table

In the table I'm working with, there are 6 columns and only 5 of them have data filled in. The last column is currently empty for all rows. I am now trying to populate the last column of each row with some data. Can someone guide me on how to use a f ...

Matching list symbols in regular expressions (Angular 2)

I have been attempting to find a solution for matching a list of symbols using regex, but I keep encountering errors in the result. The symbol list includes: !@#$+*{}?<>&’”[]=%^ if (text.match('^[\[\]\!\"\#&bs ...

issues encountered when trying to integrate bootstrap.js in Django framework

My website is built using the Django templating engine with Bootstrap for design and basic JavaScript. While the CSS components from Bootstrap are working fine, I'm having trouble getting the JavaScript to work: {% load staticfiles %} <!d ...

Utilizing a server-side PHP environment alongside a dynamic JQuery slider

I recently completed a PHP course on Codecademy and wanted to dive into a new project to further enhance my skills. However, I've hit a roadblock while working on it - specifically having trouble with the AJAX functionality. I'm struggling to ide ...

Display an error message whenever the mouse leaves the input field

Can someone please help me with how to display an error message in Angular4 when the input field is required and the mouse leaves the input? I want the error to show only when the mouse leaves the input, not while I am typing within the input field. Here ...

What could be causing the server to not successfully receive the ajax request?

I need to conduct integration tests on a website that routes all requests through a proxy: var express = require("express"), http = require("http"), port = (process.env.PORT || 8001), server = module.exports = express(), httpProxy = requir ...

Display scroll bars over the position:absolute header

My container has content that exceeds its size in both directions. To see the issue, try scrolling horizontally and vertically on the table available here: The vertical scrollbar is visible as desired, except that it gets hidden behind the table header un ...

Converting month names to uppercase with moment.js

After changing the moment's locale by setting the property below: moment.locale(chosenLocale); It appears that everything is functioning correctly. The month names and weekday names are displayed according to the selected locale, and week numbers ar ...

Error: The function $compile does not exist

Currently, I am working on developing an AngularJS directive using TypeScript. While testing my code in the browser, I encountered the following error: TypeError: $compile is not a function at compileComponent.js:14 Interestingly, the TypeScript compiler ...

Organize divs based on their attributes

Using inspiration from this SO post, my goal is to group divs based on their "message-id" attribute. The idea is to wrap all divs with the same "message-id" in a div with the class name "group". <div class="message" message-id="1"> ...

Error encountered while using Jest, React, Typescript, and React-Testing-Library

I have set up a project using React/NextJS with Typescript and now I am incorporating unit testing with Jest and React Testing Library. One of the unit tests for my component is as follows: import React from 'react'; import '@testing-libra ...

Having trouble obtaining a valid Expo push notification token

I'm currently developing a React Native app using Expo but encountering issues with obtaining a valid token, which in turn affects the push notification functionality. Upon pasting the generated token on , an error message stating "This is not a vali ...

Nothing is being displayed on the screen via React

Initially, I used a function instead of a class, and the code was functioning up to a certain point. However, now it is not displaying anything at all. In my VehiclesList.js, I am generating 10 random vehicles. Here is the code snippet: import React from ...

Performance problem with React-Native for-looping through a large array size

I'm currently facing a performance issue with the search function in my react-native app. The search involves scanning through an array of 15,000 elements for specific keywords. Surprisingly, the search performs well and quickly on Android devices, bu ...

Methods for minimizing components re-rendering

I'm currently exploring Next.js. I have two pages, A and B, each containing component C. Whenever I navigate between the pages, component C gets re-rendered. Is there a way to prevent this from happening? To clarify, I don't want useEffect to exe ...

Identify the specific element that activated the MutationObserver across multiple elements

After exploring a helpful Stack Overflow post, I discovered that it is feasible to monitor multiple elements using a single MutationObserver object. In order to track the text of two specific elements on a website, I crafted the following script: var secon ...

What could be the reason why the CSS class is not being applied?

Can you explain why my CSS class isn't being applied? I included my external CSS file like this: @import url("https://gist.githubusercontent.com/eirikbakke/1059266/raw/d81dba46c76169c2b253de0baed790677883c221/gistfile1.css"); And used it in my code ...

Leveraging entities within entities with connections and seeding data in Nest JS / TypeORM

Imagine we are developing our initial entities for a brand new web application. We start with an entity for users: @Entity() export class User { @PrimaryGeneratedColumn() id: number; @Column() username: string; @Column() password: string; ...

Mastering the art of applying a conditional class within an Alpine JS x-for template

I am currently working on iterating through a loop and adding a conditional class to each element above 4 items in order to implement some responsive styling with tailwindcss. Initially, I had the loop adding another class, which was functioning properly: ...

Disregarding axios error due to invalid certificates while developing a visual studio code extension

I'm currently developing a Visual Studio Code extension that involves making HTTPS GET requests. I'm working on ignoring invalid certificates, specifically expired certificates. Below is a simple TypeScript script that successfully achieves this ...