Модификация на съхранени структури в localStorage в JavaScript

Да предположим, че в локалното хранилище е съхранен някакъв масив:

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

Да предположим, че сега трябва да модифицираме този масив по някакъв начин, например, да добавим в края още един елемент или да променим вече съществуващ.

За решаване на задачата ще получим низът, съхранен в хранилището, с масива, ще преобразуваме този низ в масив, ще извършим необходимите манипулации с този масив, ще преобразуваме масива обратно в низ и ще го запишем обратно в хранилището:

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

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

localStorage.setItem('data', JSON.stringify(data));

Задание 1

Даден е следният масив с потребители:

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

Запазете го в локалното хранилище. След това направете 3 входни полета и бутон. Нека във входните полета се въвеждат фамилия, име и възраст. При натискане на бутона запишете нов потребител в края на запазения в хранилището масив.