개요

웹 애플리케이션에서는 사용자 데이터를 장기간 저장해야 할 때가 있습니다. 이러한 경우에 로컬 스토리지(Local Storage) 를 사용하여 간단하게 데이터를 저장할 수 있습니다. 로컬 스토리지는 모든 최신 브라우저에서 지원되며, 사용자의 로컬 컴퓨터에 데이터를 저장하여 애플리케이션 재시작 후에도 데이터를 복원할 수 있게 해줍니다.

로컬 스토리지에 데이터 저장하기

로컬 스토리지는 localStorage 객체를 사용하여 데이터를 저장합니다. 아래는 간단한 예제 코드입니다.

// 데이터 저장
localStorage.setItem("username", "John Doe");
localStorage.setItem("email", "johndoe@example.com");

// 데이터 가져오기
const username = localStorage.getItem("username");
const email = localStorage.getItem("email");
console.log(username); // John Doe
console.log(email); // johndoe@example.com

위의 코드에서 setItem 메서드를 사용하여 데이터를 저장하고, getItem 메서드를 사용하여 데이터를 가져올 수 있습니다. 데이터는 문자열 형태로 저장되며, 필요에 따라서 JSON.stringify와 JSON.parse를 사용하여 객체 형태로 저장 및 추출할 수 있습니다.

데이터 삭제하기

로컬 스토리지에서 데이터를 삭제하려면 removeItem 메서드를 사용하면 됩니다. 아래는 데이터를 삭제하는 예제 코드입니다.

localStorage.removeItem("username");

위의 코드를 실행하면 “username” 키와 연결된 데이터가 로컬 스토리지에서 제거됩니다.

요약

로컬 스토리지는 웹 애플리케이션에서 데이터를 장기간 저장하기 위한 간단한 메커니즘을 제공합니다. localStorage 객체를 사용하여 데이터를 저장하고, getItem 메서드로 데이터를 가져올 수 있습니다. 데이터는 문자열 형태로 저장되지만 JSON.stringify와 JSON.parse를 사용하여 객체 형태로 저장하고 추출할 수도 있습니다. 필요에 따라 데이터는 removeItem 메서드를 사용하여 삭제할 수도 있습니다.

#javascript #로컬스토리지