Modificação de Estruturas Armazenadas no localStorage em JavaScript

Suponha que um array esteja armazenado no armazenamento local:

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

Agora, suponha que precisemos modificar esse array de alguma forma, por exemplo, adicionar um outro elemento ao final ou alterar um elemento existente.

Para resolver o problema, vamos obter a string do array armazenada no armazenamento, converter essa string em um array, realizar as manipulações necessárias nesse array, converter o array de volta em uma string e gravá-la novamente no armazenamento:

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

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

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

Задание 1

Dado o seguinte array de usuários:

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

Salve-o no armazenamento local. Em seguida, crie 3 inputs e um botão. Deixe que sobrenome, nome e idade sejam inseridos nos inputs. Ao clicar no botão, adicione um novo usuário ao final do array salvo no armazenamento.