How to edit a property of a certain object from LocalStorage and then put it back in Vanilla Javascript?

Question

Say I have an array of objects:

const colors = [
  {
    name: "red",
    label: "red",
    colorHex: "#FF0000",
  },
  {
    name: "blue",
    label: "blue",
    colorHex: "#0000FF",
  },
  {
    name: "yellow",
    label: "yellow",
    colorHex: "#FFFF00",
  },
  {
    name: "green",
    label: "green",
    colorHex: "green",
  },
  {
    name: "purple",
    label: "purple",
    colorHex: "#800080",
  },
  {
    name: "orange",
    label: "orange",
    colorHex: "#ffa500",
  },
  {
    name: "bluegreen",
    label: "blue green",
    colorHex: "#0d98ba",
  },
  {
    name: "blueviolet",
    label: "blue violet",
    colorHex: "#8a2be2",
  },
  {
    name: "yellowgreen",
    label: "yellow green",
    colorHex: "#9acd32",
  },
  {
    name: "redviolet",
    label: "red violet",
    colorHex: "#c71585",
  },
  {
    name: "redorange",
    label: "red orange",
    colorHex: "#ff6600",
  },
  {
    name: "yelloworange",
    label: "yellow orange",
    colorHex: "#ffae42",
  },
];

I don't want to look at these objects one by one, or access it by means of indexing. Instead, I just want to take the object itself from the array that has the property name redorange (by using a for loop or something?) from Local Storage.

Afterwards, I want to edit/change this property to let's say reddishorange. And then put it back to Local Storage. I don't know how to do this.

`colors.find(({ name }) => name === "redorange").name = "reddishorange"` — Phil, Oct 20 '20 at 22:45
For `localStorage`, use `JSON.parse()` when reading and `JSON.stringify()` when writing. I've added another link to the list at the top of your question — Phil, Oct 20 '20 at 23:02

score 1 · Answer 1 · answered Oct 20 '20 at 22:45

1

var color=colors.find(v=>v.name=="redorange")
color=color || {} //in case not found
color.name="reddishorange"

answered Oct 20 '20 at 22:45

Sam Washington

626
4
12

You could inline the `|| {}` with the first line and make `color` a `const`. Even better, use `?? {}` – Phil Oct 20 '20 at 22:46
correct, i couldn't even line up all 3 lines, just didn't want to confuse the OP – Sam Washington Oct 20 '20 at 22:50
I'm sorry @Jew I forgot to include the Local Storage here. Please help. – Zedd Oct 20 '20 at 22:57
vanilla localstorage can only store strings, are you using some library? – Sam Washington Oct 20 '20 at 23:01

score 0 · Answer 2 · answered Oct 20 '20 at 22:47

0

Of course, it's possible, and not difficult at all.

colors.forEach(color => {
  color.name = color.name === "redorange" ? "reddishorange" : color.name
})

answered Oct 20 '20 at 22:47

Bulent

3,307
1
14
22

I'm sorry @BülentAkgül I forgot to include the Local Storage here. Please help. – Zedd Oct 20 '20 at 22:56
Does local storage mean your hard drive? – Bulent Oct 20 '20 at 22:59
Yes hard drive in my computer. – Zedd Oct 20 '20 at 23:00
Javascript can't change the file. It can read the data, manipulate the data but can save the new data. So you need to use something else, maybe PHP. – Bulent Oct 20 '20 at 23:02

How to edit a property of a certain object from LocalStorage and then put it back in Vanilla Javascript?

2 Answers2