JavaScriptでのlocalStorage内保存構造の修正

ローカルストレージに以下のような配列が 保存されているとします:

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個の入力欄とボタンを作成します。 入力欄には、姓、名、年齢を入力できるようにします。 ボタンをクリックすると、新しいユーザーが ストレージに保存された配列の末尾に追加されるようにしてください。