Pengubahsuaian Struktur Tersimpan dalam localStorage dalam JavaScript

Katakan dalam storan tempatan disimpan sesuatu array:

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

Sekarang katakan kita perlu mengubahsuai array ini, contohnya, menambah satu elemen lagi pada penghujungnya atau menukar elemen yang sedia ada.

Untuk menyelesaikan masalah ini, dapatkan rentetan array yang disimpan dalam storan, tukar rentetan ini kepada array, lakukan manipulasi yang diperlukan dengan array ini, tukar array ini kembali kepada rentetan dan tulis semula ke dalam storan:

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

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

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

Diberi array pengguna berikut:

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

Simpan array ini dalam storan tempatan. Kemudian buat 3 input dan satu butang. Katakan dalam input dimasukkan nama keluarga, nama dan umur. Apabila butang ditekan, tulis pengguna baru ke penghujung array yang disimpan dalam storan.