목차
소개
웹 애플리케이션에서 사용자 데이터를 임시로 또는 영구적으로 저장하는 데 사용되는 웹 스토리지는 다양한 형태로 구현될 수 있습니다. 이 튜토리얼에서는 HTML5에서 도입된 로컬 스토리지와 세션 스토리지에 대해 알아보고, 해당 API를 사용하는 방법을 다루겠습니다.
로컬 스토리지
로컬 스토리지는 영구적으로 유지되는 데이터를 저장하는 데 사용됩니다. 이 데이터는 도메인에 할당되어 웹 애플리케이션이 로드될 때에도 유지됩니다. 로컬 스토리지는 localStorage 객체를 사용하여 데이터를 저장하고, 필요한 경우에 다시 불러올 수 있습니다.
예시:
<!DOCTYPE html>
<html>
<body>
<script>
// 로컬 스토리지에 데이터 저장
localStorage.setItem('username', 'john_doe');
// 로컬 스토리지에서 데이터 불러오기
let username = localStorage.getItem('username');
console.log(username); // john_doe
</script>
</body>
</html>
세션 스토리지
세션 스토리지는 임시적으로 유지되는 데이터를 저장하는 데 사용됩니다. 이 데이터는 웹 브라우저 세션이 유지되는 동안에만 유효하며, 세션 종료 시에 자동으로 삭제됩니다. 세션 스토리지는 sessionStorage 객체를 사용하여 데이터를 저장하고, 필요한 경우에 다시 불러올 수 있습니다.
예시:
<!DOCTYPE html>
<html>
<body>
<script>
// 세션 스토리지에 데이터 저장
sessionStorage.setItem('theme', 'dark');
// 세션 스토리지에서 데이터 불러오기
let theme = sessionStorage.getItem('theme');
console.log(theme); // dark
</script>
</body>
</html>
웹 스토리지 API
웹 스토리지 API는 로컬 스토리지와 세션 스토리지를 조작하기 위한 메서드와 속성을 제공합니다. 이 API는 단순하고 사용하기 쉽기 때문에, 웹 애플리케이션에서 사용자 데이터를 저장하고 관리하는 데 매우 유용합니다.
여러분이 인터넷 브라우저에서 localStorage와 sessionStorage 객체에 데이터 저장 및 불러오기 예제를 보았습니다. 이제 여러분은 이러한 방법을 사용하여 웹 애플리케이션에서 사용자 관련 데이터를 유지할 수 있게 되었습니다. 더 많은 정보를 원한다면, 웹 스토리지 API에 대해 자세히 알아보세요.