Модификация хранимых структур в 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 инпута и кнопку. Пусть в инпуты вводятся фамилия, имя и возраст. По нажатию на кнопку запишите нового юзера в конец сохраненного в хранилище массива.