자바스크립트 Local Storage에서 데이터 수정하기

Local Storage란?

Local Storage는 웹 브라우저에 데이터를 저장하는 기능입니다. 이 기능을 사용하면 웹 페이지가 갱신되거나 브라우저를 종료해도 데이터가 유지됩니다.

데이터 수정하기

Local Storage에서 데이터를 수정하는 방법은 다음과 같습니다:

  1. 데이터 가져오기: 먼저 localStorage.getItem() 메서드를 사용하여 수정하려는 데이터를 가져옵니다. 이 메서드는 key 값을 인자로 받아 해당 key의 값을 반환합니다.
let data = localStorage.getItem('key');
  1. 데이터 수정하기: 가져온 데이터를 원하는대로 수정한 뒤, 다시 Local Storage에 저장합니다. 수정된 데이터를 Local Storage에 저장하기 위해서는 localStorage.setItem() 메서드를 사용합니다. 이 메서드는 key와 value를 인자로 받아 해당 key에 값을 저장합니다.
data = '수정된 데이터';
localStorage.setItem('key', data);
  1. 수정된 데이터 확인하기: 데이터를 수정한 뒤에는 localStorage.getItem() 메서드를 통해 수정된 데이터를 확인할 수 있습니다.
let updatedData = localStorage.getItem('key');
console.log(updatedData);

예외 처리하기

위의 코드에서는 데이터를 수정하기 전 getItem() 메서드를 통해 데이터를 가져오지만, 만약 해당 key가 존재하지 않으면 null을 반환합니다. 따라서 데이터가 존재하지 않을 경우 예외 처리를 해주는 것이 좋습니다.

let data = localStorage.getItem('key');
if (data) {
  // 데이터가 존재할 경우 수정하는 코드 작성
} else {
  // 데이터가 존재하지 않을 경우 처리하는 코드 작성
}

요약

이렇게 자바스크립트의 Local Storage에서 데이터를 수정하는 방법에 대해 알아보았습니다. Local Storage를 사용하면 웹 브라우저에 데이터를 저장하고 필요한 때에 가져와 수정할 수 있습니다. 데이터 수정 시 예외 처리를 잊지 않도록 주의해야 합니다.

#javascript #LocalStorage #데이터수정