The process of updating the value of an element in local storage with JavaScript

Question

The process of updating the value of an element in local storage with JavaScript

Most of the time we have an object stored in our localStorage.

let car = {
    brand: "Tesla",
    model: "Model S"
  };

 localStorage.setItem("car", JSON.stringify(car));

I am now eager to update the value of "model". How do I go about achieving this using Javascript?

(Although the code below isn't functional, it provides a glimpse of what I intend to accomplish)

 localStorage.setItem(localStorage.getItem("car").model, "Model X");

javascript json local-storage

Answer 1

Answer №1

First, you extract the JSON data, then parse it to update the object received from parsing. Next, you convert the updated object back into a string and save this result.

const spaceship = JSON.parse(localStorage.getItem("spaceship"));
spaceship.status = "newStatus";
localStorage.setItem("spaceship", JSON.stringify(spaceship));

An alternative method is to condense it into a single line using Object.assign, but this can make the code more challenging to understand and maintain:

localStorage.setItem("spaceship", JSON.stringify(Object.assign(JSON.parse(localStorage.getItem("spaceship")), {status: "newStatus"})));

Answer 2

First, you extract the JSON data, then parse it to update the object received from parsing. Next, you convert the updated object back into a string and save this result.

const spaceship = JSON.parse(localStorage.getItem("spaceship"));
spaceship.status = "newStatus";
localStorage.setItem("spaceship", JSON.stringify(spaceship));

An alternative method is to condense it into a single line using Object.assign, but this can make the code more challenging to understand and maintain:

localStorage.setItem("spaceship", JSON.stringify(Object.assign(JSON.parse(localStorage.getItem("spaceship")), {status: "newStatus"})));

The process of updating the value of an element in local storage with JavaScript

Answer №1

Similar questions

Please refrain from populating my file with unnecessary data when using writeJSONString

Loop through each element in a JSON array using jQuery's `.each()` method

What is causing the issue with using transition(myComponent) in this React 18 application?

Which is the preferable option for creating a circular daily planner: canvas or SVG?

Generate a spreadsheet file in xlsx format by using the exceljs library in Node

Can Vue.js support two-way data-binding without the use of an input element?

Text centered vertically with jQuery is only loaded after the page is resized

Converting JSON data into XML format with Python

Rearrange Material UI styles in a separate file within a React project

Node.js: Calculating the number of requests processed per second in the http.get()

"Encountered an OperationalError while trying to insert JSON data into sqlite database: Error message stating that the token "{"" is

Mastering the art of jQuery scrolling: A step-by-step guide

An error with jQuery occurred in the client's post response, resulting in a 400 POST HTTP/1.1 error

Enable modification of form field once a personalized dynamic stamp has been applied

How to retrieve HTML attribute using D3 techniques

JavaScript - Declaring canvas as a global object

Guide to transforming a file from a str class type to a Python dictionary

Remove input fields that were generated upon clicking a button

Tips for retrieving JSON data from an API and displaying it as listview labels in Xamarin using C#:

Investigate the CSS display property of an element using JavaScript