Modificatie van opgeslagen structuren in localStorage in JavaScript

Stel dat in de lokale opslag een bepaalde array is opgeslagen:

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

Stel dat we deze array nu op de een of andere manier moeten wijzigen, bijvoorbeeld door er nog een element aan toe te voegen of een bestaand element te wijzigen.

Om het probleem op te lossen, halen we de in de opslag opgeslagen string met de array op, zetten deze string om in een array, voeren de nodige manipulaties uit met deze array, zetten deze array weer om in een string en schrijven deze terug naar de opslag:

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

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

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

Gegeven de volgende array met gebruikers:

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

Sla deze op in de lokale opslag. Maak dan 3 invoervelden en een knop. Laat in de invoervelden achternaam, voornaam en leeftijd worden ingevoerd. Bij het indrukken op de knop wordt een nieuwe gebruiker aan het einde van de in de opslag opgeslagen array toegevoegd.