Tallennettujen rakenteiden muokkaaminen localStorage:ssa JavaScriptissä

Oletetaan, että paikallisessa tallennustilassa on tallennettuna jokin taulukko:

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

Oletetaan nyt, että meidän täytyy muokata tätä taulukkoa jollakin tavalla, esimerkiksi lisätä sen loppuun yksi elementti tai muuttaa jo olemassa olevaa elementtiä.

Ongelman ratkaisemiseksi haetaan tallennustilassa oleva taulukkoa edustava merkkijono, muunnetaan tämä merkkijono taulukoksi, tehdään tälle taulukolle tarvittavat muokkaukset, muunnetaan tämä taulukko takaisin merkkijonoksi ja kirjoitetaan se takaisin tallennustilaan:

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

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

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

Annettu on seuraava käyttäjätaulukko:

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

Tallenna se paikalliseen tallennustilaan. Tee sitten 3 syötekenttää ja painike. Annetaan, että syötekenttiin syötetään sukunimi, etunimi ja ikä. Painiketta painamalla tallenna uusi käyttäjä tallennustilaan tallennetun taulukon loppuun.