CODEWITHSUNDEEP
javascriptjqueryhtmlarrays
user2828442
user2828442

Reputation: 2515

How to update a specific item of an array in local storage

I have this value stored in my key, value

Now on my HTML DOM, I add some data [you can give example using any variable] and I want to update the description: parameter of the array below, can you guide me how can I simply update its value with any variable's value as example

key - Section283

value -

{
    "subtitle": "",
    "description": "<p>We are glad to hear from you!</p>",
    "id": "689",
    "title": "footer",
    "sectionType": "283",
    "latitude": "0",
    "longitude": "0",
    "tags": "",
    "userId": "32",
    "internalLink": "menu-lam"
}

Upvotes: 0

Views: 3487

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65808

First, let's be clear that you do not have an array at all. What you are showing is an object. In plain JavaScript, the key names do not need to be quoted unless they have spaces in their names. With objects, updating one of its properties is easy:

// Note the the property names do not need to be quoted unless they contain spaces:
var myObject = {
        subtitle: "",
        description: "<p>We are glad to hear from you!</p>",
        id: "689",
        title: "footer",
        sectionType: "283",
        latitude: "0",
        longitude: "0",
        tags: "",
        userId: "32",
        internalLink: "menu-lam"
    }
    
    // Getting property value out of an object:
    console.log("Original value of \"description\" property: " + myObject.description);
    
    // Changing property value:
    myObject.description = "Something New";
    
    // Getting new value:
    console.log("Current value of \"description\" property: " + myObject.description);

When you need to store something like this in localStorage, the object must be turned into a string (because that's the only data type localStorage can store). You can easily do this with the native JSON object, like this:

        var myObject = {
            subtitle: "",
            description: "<p>We are glad to hear from you!</p>",
            id: "689",
            title: "footer",
            sectionType: "283",
            latitude: "0",
            longitude: "0",
            tags: "",
            userId: "32",
            internalLink: "menu-lam"
        }
        
        console.log("Original type for \"myObject\": " + typeof myObject);
        
        // Convert object to JSON
        var jObj = JSON.stringify(myObject);
        
        // Check converted type:
        console.log("Type for \"myObject\": " + typeof jObj);

Once the JSON string is created you can store it in localStorage like this:

localStorage.setItem("myData", jObj);

Then, to retrieve the data, you'd write:

var jsonString = localStorage.getItem("myData");

And finally, you need to convert the string back to an object and then you can use it normally:

// This sets up what you'd get back from localStorage:
var localStorageString = `{
    "subtitle": "",
    "description": "<p>We are glad to hear from you!</p>",
    "id": "689",
    "title": "footer",
    "sectionType": "283",
    "latitude": "0",
    "longitude": "0",
    "tags": "",
    "userId": "32",
    "internalLink": "menu-lam"
}`;


// Convert the string back to an object
var obj = JSON.parse(localStorageString);

// Use the object as normal:
obj.description = "Something New";
console.log(obj.description);

Upvotes: 1

MarkyMarksFunkyBunch
MarkyMarksFunkyBunch

Reputation: 1190

Here's what I'm thinking. Access your value using your key and then convert it to a Javascript Object and update it's description property. Then convert the json object back to a string and use the key with the Array to set (essentially overwrite) the value. Stab in the dark here.

var jsonObj = json.parse(yourArray['Section283']);
jsonObj.description = 'Whatever you want here';
yourArray['Section283'] = JSON.stringify(jsonObj);

Upvotes: 0

zenwraight
zenwraight

Reputation: 2000

You can use something like this to set the localStorage

localStorage.setItem(key, 'Section283');

Hope this helps!

Upvotes: 0

Related Questions