[JavaScript] 로컬 스토리지에 데이터를 저장

localStorage.setItem('key', 'value')를 사용하여 로컬 스토리지에 데이터를 저장하는 방법과 관련한 예제를 자세히 설명하겠습니다. 로컬 스토리지는 웹 브라우저에서 데이터를 클라이언트 측에 저장하는 데 사용되며, 저장된 데이터는 브라우저를 닫고 다시 열어도 유지됩니다.

예제 1: 로컬 스토리지에 데이터 저장하기

// 'myKey'라는 키와 'myValue'라는 값을 로컬 스토리지에 저장합니다.
localStorage.setItem('myKey', 'myValue');

이 예제에서는 'myKey'라는 키와 'myValue'라는 값을 localStorage.setItem('myKey', 'myValue')를 사용하여 로컬 스토리지에 저장합니다.

예제 2: 입력 필드에서 데이터 저장하기

<!-- HTML에서 입력 필드와 버튼이 있다고 가정합니다. -->
<input type="text" id="dataInput" placeholder="데이터 입력">
<button id="saveButton">저장</button>

// 요소를 선택합니다.
const dataInput = document.getElementById('dataInput');
const saveButton = document.getElementById('saveButton');

// 버튼 클릭 시 입력 필드의 내용을 로컬 스토리지에 저장합니다.
saveButton.addEventListener('click', () => {
  const key = 'userData';
  const value = dataInput.value;
  localStorage.setItem(key, value);
  alert('데이터가 저장되었습니다.');
});

이 예제에서는 입력 필드에 데이터를 입력하고 '저장' 버튼을 클릭했을 때 해당 데이터를 로컬 스토리지에 저장합니다. localStorage.setItem()을 사용하여 데이터를 저장한 후 저장이 완료되었다는 경고를 표시합니다.

예제 3: 로컬 스토리지에서 데이터 가져오기

// 'myKey' 키로 저장된 데이터를 가져와서 변수에 할당합니다.
const storedValue = localStorage.getItem('myKey');

if (storedValue) {
  console.log('로컬 스토리지에서 가져온 데이터:', storedValue);
} else {
  console.log('로컬 스토리지에 해당 데이터가 없습니다.');
}

이 예제에서는 'myKey' 키로 저장된 데이터를 localStorage.getItem('myKey')를 사용하여 로컬 스토리지에서 가져옵니다. 데이터가 존재하는지 확인하고 있으면 해당 데이터를 콘솔에 출력합니다.