Modifica delle strutture memorizzate in localStorage in JavaScript

Supponiamo che nell'archivio locale sia memorizzato un certo array:

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

Ora supponiamo di dover modificare in qualche modo questo array, ad esempio, aggiungergli alla fine un altro elemento o modificare uno già esistente.

Per risolvere il problema, otteniamo la stringa con l'array memorizzata nell'archivio, convertiamo questa stringa in un array, eseguiamo le necessarie manipolazioni su questo array, riconvertiamo l'array in una stringa e lo riscriviamo nell'archivio:

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

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

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

Dato il seguente array di utenti:

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

Salvatelo nell'archivio locale. Poi create 3 input e un pulsante. Lasciate che negli input vengano inseriti cognome, nome ed età. Alla pressione del pulsante, scrivete un nuovo utente alla fine dell'array salvato nell'archivio.