자바스크립트로 브라우저 로컬 스토리지 사용하기

로컬 스토리지란?

로컬 스토리지는 브라우저에 데이터를 저장할 수 있는 기능입니다. 이 데이터는 브라우저를 닫아도 유지되며, 해당 도메인에서만 접근할 수 있어 보안성이 높습니다.

로컬 스토리지 사용하기

로컬 스토리지에 데이터를 저장하기 위해서는 `localStorage` 객체를 사용합니다. `localStorage` 객체는 키-값 쌍으로 데이터를 저장하고, 문자열 형태로 저장됩니다.

localStorage.setItem('name', 'John');

위 코드는 `name`이라는 키에 `John`이라는 값을 저장합니다. 저장된 데이터는 다음과 같은 방법으로 불러올 수 있습니다.

const name = localStorage.getItem('name');
console.log(name); // John

위 코드에서 `getItem()`은 `name`이라는 키에 저장된 값을 불러옵니다. 저장된 값이 없다면 `null`을 반환합니다.

로컬 스토리지 데이터 삭제하기

로컬 스토리지에서 데이터를 삭제하기 위해서는 `localStorage.removeItem()` 메소드를 사용합니다.

localStorage.removeItem('name');

위 코드는 `name`이라는 키에 저장된 데이터를 삭제합니다.

요약

`localStorage` 객체를 사용하여 브라우저 로컬 스토리지에 데이터를 저장하고 불러오는 방법을 살펴보았습니다. 데이터를 저장하려면 `setItem()` 메소드를, 데이터를 불러오려면 `getItem()` 메소드를 사용합니다. 데이터를 삭제하려면 `removeItem()` 메소드를 사용합니다.

자바스크립트 브라우저 로컬 스토리지는 브라우저 내에 데이터를 안전하게 보관할 수 있는 편리한 기능입니다. 이를 활용해 다양한 웹 애플리케이션을 개발할 수 있습니다.