Modifiering av lagrade strukturer i localStorage i JavaScript

Antag att en array lagras i den lokala lagringen:

javascriptlet arr = [1, 2, 3, 4, 5];
localStorage.setItem('data', JSON.stringify(arr));

Antag nu att vi behöver modifiera denna array på något sätt, till exempel lägga till ytterligare ett element i slutet eller ändra ett redan existerande element.

För att lösa problemet hämtar vi strängen med arrayen som lagras i lagringen, omvandlar denna sträng till en array, utför nödvändiga manipulationer med denna array, omvandlar arrayen tillbaka till en sträng och skriver tillbaka den till lagringen:

javascriptlet json = localStorage.getItem('data');
let data = JSON.parse(json);

data.push(6);
data[0] = '!';

localStorage.setItem('data', JSON.stringify(data));
Задание 1

Följande array med användare är given:

javascriptlet users = [
  {
    surn: 'surn1',
    name: 'name1',
    age: 31,
  },
  {
    surn: 'surn2',
    name: 'name2',
    age: 32,
  },
  {
    surn: 'surn',
    name: 'name3',
    age: 33,
  },
];

Spara den i den lokala lagringen. Gör sedan 3 inmatningsfält och en knapp. Låt efternamn, förnamn och ålder skrivas in i inmatningsfälten. Vid klick på knappen ska en ny användare skrivas till slutet av arrayen som sparats i lagringen.