JavaScript에서 localStorage에 저장된 구조 수정하기

로컬 스토리지에 다음과 같은 배열이 저장되어 있다고 가정해 봅시다:

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개의 입력창과 버튼을 만드세요. 입력창에는 성, 이름, 나이를 입력할 수 있게 합니다. 버튼을 클릭하면 새로운 사용자를 스토리지에 저장된 배열의 끝에 추가하세요.