Why does LocalStorage work strange with arrays?

Question

Problems:

When I enter something and click SEND the elements are sorted as a list <ul><li></li></ul> (good thing) but after reloading the page the data appears as a string: one,two,three.

If after reloading the page you type something and click SEND the new item will appear under the string as a list.

But if you try reloading one more time you will see a new string.

You won't see one,two,three,new element.

But only: new element.

As if the data only lasted one session.

const input = document.getElementById("input");
const btn = document.getElementById("btn");
const container = document.getElementById("container");

// ARRAY
const tasks = [];

// WHEN USER CLICK BUTTON
btn.addEventListener("click", addTask);

// ADD A TASK
function addTask() {
  tasks.push(input.value);

  let li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  container.appendChild(li);

  localStorage.setItem("task", tasks);
}

container.innerText = localStorage.getItem("task");

<input type="text" id="input">
<button id="btn">SEND</button>

<ul id="container">
</ul>

UPDATE I tried with stringify() and parse(), but the problem persists. After reloading the page, the list appears as a string and old values disappear and are replaced by new ones.

const input = document.getElementById("input");
const btn = document.getElementById("btn");
const container = document.getElementById("container");

// ARRAY
const tasks = [];

// WHEN USER CLICK BUTTON
btn.addEventListener("click", addTask);

// ADD A TASK
function addTask() {
  tasks.push(input.value);

  let li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value));
  container.appendChild(li);

  localStorage.setItem("task", JSON.stringify(tasks));
}

container.innerText = JSON.parse(localStorage.getItem("task"));

Local storage stores a string, if you want to maintain a data structure, you should turn it into JSON before storing (And parse it when reading it out) — DBS, Sep 05 '22 at 12:22
localStorage values can only be strings (see the [manual](https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem)) so when you write an array to localStorage you get its string representation i.e. `'one,two,three'` — Nick, Sep 05 '22 at 12:22
I tried with stringify() and parse(), but the problem persists. After reloading the page, the list appears as a string and old values disappear and are replaced by new ones. — Jonas, Sep 05 '22 at 12:32
it's because you just inner text it - you would need to loop through the array and create and append your `li`s — Pete, Sep 05 '22 at 12:54

jeremy-denis · Accepted Answer · 2022-09-05T12:51:17.047

1

Local storage is a key value storage

value can only be string

and idea to solve your issue is to transform your structure with JSON.stringify(and recover it with JSON.parse

const input = document.getElementById("input");
const btn = document.getElementById("btn");
const container = document.getElementById("container");

// ARRAY
const tasks = [];

// WHEN USER CLICK BUTTON
btn.addEventListener("click", addTask);


function createLi(value) {
  tasks.push(value);

  let li = document.createElement("li");
  li.appendChild(document.createTextNode(value));
  container.appendChild(li);
}

// ADD A TASK
function addTask() {
  createLi(input.value);
  localStorage.setItem("task", JSON.stringify(tasks));
}

JSON.parse(localStorage.getItem("task")).forEach(task => {
  createLi(task);
});

edited Sep 05 '22 at 12:51

answered Sep 05 '22 at 12:21

jeremy-denis

6,368
3
18
35

I tried with stringify() and parse(), but the problem persists. After reloading the page, the list appears as a string and old values disappear and are replaced by new ones. – Jonas Sep 05 '22 at 12:32
don't forget to reaffect task array with already saved task to be able to manipulate save data. I can propose you to create a function for this i update my reply in consequencies – jeremy-denis Sep 05 '22 at 12:52

Why does LocalStorage work strange with arrays?

1 Answers1