localstorage

 localStorage.setItem("saveTab",[1,2,3])

console.log(localStorage.getItem("saveTab")

> 1,2,3

Il faut utiliser JSON

localStorage.setItem("saveTAB",JSON.stringify([1,2,3]))

console.log(localStorage.getItem("saveTAB"))

> [1,2,3] // ce n'est pas un tableau mais un string

typeof localStorage.getItem("saveTAB")

> 'string'

Il faut utiliser JSON.parse

console.log(JSON.parse(localStorage.getItem("saveTAB")))

VM1856:1 (3) [1, 2, 3]

0: 1

1: 2

2: 3

length: 3[[Prototype]]: Array(0)

typeof JSON.parse(localStorage.getItem("saveTAB"))

'object'

En action

fetch !

Soit le fichier products.json
{ "products" : [
  { "Name": "Cheese", "Price" : 2.50, "Location": "Refrigerated foods"},
  { "Name": "Crisps", "Price" : 3, "Location": "the Snack isle"},
  { "Name": "Pizza", "Price" : 4, "Location": "Refrigerated foods"},
  { "Name": "Chocolate", "Price" : 1.50, "Location": "the Snack isle"},
  { "Name": "Self-raising flour", "Price" : 1.50, "Location": "Home baking"},
  { "Name": "Ground almonds", "Price" : 3, "Location": "Home baking"}
]} 

On peut comparer les écritures :

 fetch('products.json')
    .then(function(response) {
      //console.log(response)
      return response.json();
    })
    .then(function(json) {
      let myList = document.querySelector('ul');
      myList.innerHTML = `${json.products.map(p => `<li> ${p.Name} </li>`).join('')}`;
    });

---------
let myList = document.querySelector('ul');
    fetch('products.json')
    .then(function(response) {
      //console.log(response)
      return response.json();
    })
    .then(function(json) {
      let li='';
      for (let p of json.products){
        li+= `<li><strong> ${p.Name} </strong></li>`
      }
      myList.innerHTML = li;
    });

-------------
    let myList = document.querySelector('ul');
    fetch('products.json')
    .then(function(response) {
      //console.log(response)
      return response.json();
    })
    .then(function(json) {
      for (let p of json.products){
        let li = document.createElement('li');
        li.innerHTML = `<strong> ${p.Name} </strong>`
        myList.appendChild(li);
      }
    });

JSON ?

Les données sur lesquelles vous travaillez ne se trouvent généralement pas dans le fichier JS.
Elles sont dans une base de données. Pour être manipulées, les données seront extraites.

JSON est le format de transfert de données ( XML en est un autre).

Passage d'un objet JS à un objet JSON 

const profJS = {
    nom: "Dupont",
    prenom: "denis"
};

profJSON = JSON.stringify(profJS);

console.log(profJSON); //{"nom":"Dupont","prenom":"denis"}

Passage d'un objet JSON à un objet JS

const profJSON = '{"nom":"Dupont","prenom":"denis"}'

let profJS = JSON.parse(profJSON);

console.log(profJS);

Cas des tableaux :

let profJSON = "[{\"name\":\"Carolus Haverbeke\"},{\"name\":\"Emma de Milliano\"}]";

profJS = JSON.parse(profJSON);


console.log(profJS);

Remarque 

ProfJSON est un string, l'écriture suivante serait incorrecte à cause des retours Chariot.

const profJSON = '{
   "nom":"Dupont",
   "prenom":"denis"
}'