로컬스토리지란?
로컬스토리지는 웹 브라우저에 데이터를 저장하는 기술입니다. 이는 웹 애플리케이션에서 사용자가 페이지를 종료하고 다시 접속해도 데이터를 유지할 수 있도록 도와줍니다. 로컬스토리지는 세션스토리지와 달리 영구적으로 데이터를 저장하므로, 사용자 경험을 개선하거나 중요한 정보를 저장하는 데에 적합합니다.
로컬스토리지 조작하기
데이터 저장하기
로컬스토리지에 데이터를 저장하기 위해서는 localStorage.setItem() 메서드를 사용합니다. 이 메서드는 두 개의 인자를 받습니다. 첫 번째 인자는 데이터의 키(key)로 사용할 문자열이며, 두 번째 인자는 저장할 데이터입니다.
localStorage.setItem('username', 'John');
위의 코드는 ‘username’이라는 키에 ‘John’이라는 데이터를 저장합니다.
데이터 불러오기
로컬스토리지에 저장된 데이터를 불러오기 위해서는 localStorage.getItem() 메서드를 사용합니다. 이 메서드는 하나의 인자를 받으며, 인자로는 데이터의 키(key)를 전달합니다. 이후 해당 키에 해당하는 데이터를 반환합니다.
const username = localStorage.getItem('username');
console.log(username); // 'John'
위의 코드는 ‘username’이라는 키에 저장된 데이터를 불러와 username 변수에 할당하고, 콘솔에 출력합니다.
데이터 삭제하기
로컬스토리지에서 데이터를 삭제하기 위해서는 localStorage.removeItem() 메서드를 사용합니다. 이 메서드는 하나의 인자를 받으며, 인자로는 삭제할 데이터의 키(key)를 전달합니다.
localStorage.removeItem('username');
위의 코드는 ‘username’이라는 키에 해당하는 데이터를 로컬스토리지에서 삭제합니다.
요약
로컬스토리지는 웹 브라우저에서 데이터를 영구적으로 저장하는 기술입니다. 데이터를 저장, 불러오기, 삭제하기 위해서는 각각 localStorage.setItem(), localStorage.getItem(), localStorage.removeItem() 메서드를 사용할 수 있습니다. 이를 이용하여 사용자 경험을 개선하거나 필요한 정보를 유지할 수 있습니다.