Modyfikacja przechowywanych struktur w localStorage w JavaScript

Załóżmy, że w lokalnej pamięci przechowywana jest pewna tablica:

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

Załóżmy teraz, że potrzebujemy w jakiś sposób zmodyfikować tę tablicę, na przykład dodać na jej koniec kolejny element lub zmienić już istniejący.

Aby rozwiązać zadanie, pobierzemy przechowywany w pamięci ciąg znaków z tablicą, przekształcimy ten ciąg w tablicę, wykonamy na tej tablicy niezbędne manipulacje, przekształcimy tę tablicę z powrotem w ciąg znaków i zapiszemy z powrotem do pamięci:

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

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

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

Dana jest następująca tablica z użytkownikami:

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

Zapisz ją w lokalnej pamięci. Następnie stwórz 3 pola input i przycisk. Niech w polach input wprowadzane są nazwisko, imię i wiek. Po naciśnięciu przycisku zapisz nowego użytkownika na końcu zapisanej w pamięci tablicy.