Modificación de estructuras almacenadas en localStorage en JavaScript

Supongamos que en el almacenamiento local se almacena un array:

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

Ahora supongamos que necesitamos modificar de alguna manera este array, por ejemplo, agregar al final otro elemento o cambiar uno existente.

Para resolver el problema, obtendremos la cadena con el array almacenada en el almacenamiento, convertiremos esta cadena en un array, realizaremos las manipulaciones necesarias con este array, convertiremos este array nuevamente en una cadena y lo escribiremos de vuelta en el almacenamiento:

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

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

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

Se da el siguiente array con usuarios:

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

Guárdelo en el almacenamiento local. Luego haga 3 inputs y un botón. Que en los inputs se ingresen apellido, nombre y edad. Al hacer clic en el botón, escriba un nuevo usuario al final del array guardado en el almacenamiento.