การปรับเปลี่ยนโครงสร้างข้อมูลที่เก็บใน localStorage ใน JavaScript

สมมติว่ามีอาร์เรย์บางอย่างเก็บไว้ ในพื้นที่เก็บข้อมูลท้องถิ่น:

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

สมมติว่าตอนนี้เราจำเป็นต้องปรับเปลี่ยน อาร์เรย์นี้ในบางวิธี เช่น การเพิ่ม องค์ประกอบอีกหนึ่งรายการเข้าไปที่ส่วนท้าย หรือเปลี่ยนแปลงองค์ประกอบที่มีอยู่แล้ว

ในการแก้ปัญหานี้ ให้รับสตริงของอาร์เรย์ ที่เก็บไว้ในพื้นที่เก็บข้อมูล แปลงสตริงนั้น เป็นอาร์เรย์ ดำเนินการจัดการที่จำเป็น กับอาร์เรย์นี้ จากนั้นแปลงอาร์เรย์นี้กลับ เป็นสตริงและเขียนกลับเข้าไปในพื้นที่เก็บข้อมูล:

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

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

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

ให้อาร์เรย์ของผู้ใช้ต่อไปนี้:

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

บันทึกลงในพื้นที่เก็บข้อมูลท้องถิ่น จากนั้น สร้างอินพุต 3 ช่องและปุ่มหนึ่งปุ่ม โดยให้ ป้อนนามสกุล ชื่อ และอายุลงในอินพุต เมื่อคลิกที่ปุ่ม ให้บันทึกผู้ใช้ใหม่ ลงในส่วนท้ายของอาร์เรย์ที่บันทึกไว้ในพื้นที่เก็บข้อมูล