[html] 스토리지 키-값 쌍
HTML 웹 애플리케이션을 개발할 때, 클라이언트 사이드에서 데이터를 관리하고 유지하기 위해 로컬 스토리지를 사용하는 경우가 많습니다. 이 글에서는 HTML에서 스토리지에 키-값 쌍을 저장하고 검색하는 방법에 대해 알아보겠습니다.
1. 로컬 스토리지란?
로컬 스토리지는 HTML5에서 추가된 기능으로, 클라이언트 측에서 데이터를 비구조화된 형태로 저장할 수 있는 기능을 제공합니다. 이를 통해 사용자 정보, 설정, 캐시 데이터 등을 클라이언트 측에서 관리할 수 있습니다.
2. 로컬 스토리지에 데이터 저장하기
로컬 스토리지에 데이터를 저장하기 위해서는 JavaScript의 localStorage 객체를 활용합니다. 예를 들어, username이라는 키에 사용자 이름을 값으로 저장하고자 한다면 아래와 같이 코드를 작성할 수 있습니다.
localStorage.setItem('username', 'johndoe');
3. 로컬 스토리지에서 데이터 검색하기
로컬 스토리지에 저장된 데이터는 키를 사용하여 쉽게 검색할 수 있습니다. 다음은 위에서 저장한 username 키의 값을 가져오는 예시입니다.
const username = localStorage.getItem('username');
console.log(username); // 출력: johndoe
로컬 스토리지는 브라우저를 닫았다가 다시 열어도 유지되므로, 사용자 설정 등을 저장하는 데 유용하게 활용할 수 있습니다.
로컬 스토리지를 활용하여 HTML 웹 애플리케이션을 개발할 때, 데이터를 효율적으로 저장하고 검색하는 방법에 대해 알아보았습니다. 이를 통해 사용자 경험을 향상시키는데 도움이 될 것입니다.