JavaScript Web Storage API
JavaScript Web Storage API: 클라이언트 측 데이터 저장하기
JavaScript Web Storage API는 웹 애플리케이션이 클라이언트 측에서 데이터를 저장하고 관리할 수 있도록 하는 API입니다. 이를 통해 사용자의 데이터를 브라우저에 저장하여 페이지 새로 고침 시에도 데이터를 유지할 수 있습니다. Web Storage API는 두 가지 주요 저장소를 제공합니다: Local Storage와 Session Storage. 이 가이드는 Web Storage API의 개념, 주요 기능, 활용 예제에 대해 설명합니다.
1. Web Storage API란?
Web Storage API는 브라우저에서 간편하게 키-값 쌍으로 데이터를 저장할 수 있는 기능을 제공합니다. 이 API는 두 가지 저장소를 통해 데이터를 관리할 수 있습니다:
- Local Storage: 사용자의 브라우저에 영구적으로 데이터를 저장합니다. 사용자가 명시적으로 삭제하기 전까지 데이터는 유지됩니다.
- Session Storage: 사용자가 브라우저 탭을 닫기 전까지 데이터를 저장합니다. 동일한 탭에서만 데이터를 사용할 수 있으며, 브라우저를 새로 고침해도 데이터는 유지됩니다.
1.1. 주요 특징
- 데이터 저장 용량: 대개 각 도메인당 5MB 이상의 데이터 저장이 가능합니다.
- 키-값 쌍: 모든 데이터는 문자열 형태로 저장되며, 키를 통해 접근합니다.
- 동기적 접근: 데이터는 즉시 저장되고 접근 가능하지만, Web Storage API는 비동기적이지 않습니다.
2. Local Storage
Local Storage는 데이터를 영구적으로 저장할 수 있는 저장소입니다.
2.1. Local Storage 사용
2.1.1. 데이터 저장하기
// 데이터 저장
localStorage.setItem('username', 'JohnDoe'); // 'username' 키에 'JohnDoe' 값 저장
2.1.2. 데이터 읽기
// 데이터 읽기
const username = localStorage.getItem('username'); // 'username' 키에 해당하는 값 읽기
console.log(username); // 출력: JohnDoe
2.1.3. 데이터 삭제
// 데이터 삭제
localStorage.removeItem('username'); // 'username' 키에 해당하는 데이터 삭제
2.1.4. 모든 데이터 삭제
// 모든 데이터 삭제
localStorage.clear(); // Local Storage의 모든 데이터 삭제
2.2. Local Storage 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Storage Example</title>
</head>
<body>
<h1>Local Storage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
document.getElementById('saveButton').addEventListener('click', () => {
const username = document.getElementById('username').value;
localStorage.setItem('username', username); // Local Storage에 저장
alert('Username saved!');
});
document.getElementById('loadButton').addEventListener('click', () => {
const username = localStorage.getItem('username'); // Local Storage에서 읽기
alert('Saved Username: ' + username);
});
</script>
</body>
</html>
- 이 코드는 사용자가 입력한 사용자 이름을 Local Storage에 저장하고, 저장된 이름을 읽어오는 예시입니다.
3. Session Storage
Session Storage는 사용자가 브라우저 탭을 열고 있는 동안만 데이터를 저장합니다. 탭을 닫으면 데이터는 사라집니다.
3.1. Session Storage 사용
3.1.1. 데이터 저장하기
// 데이터 저장
sessionStorage.setItem('sessionUser', 'JaneDoe'); // 'sessionUser' 키에 'JaneDoe' 값 저장
3.1.2. 데이터 읽기
// 데이터 읽기
const sessionUser = sessionStorage.getItem('sessionUser'); // 'sessionUser' 키에 해당하는 값 읽기
console.log(sessionUser); // 출력: JaneDoe
3.1.3. 데이터 삭제
// 데이터 삭제
sessionStorage.removeItem('sessionUser'); // 'sessionUser' 키에 해당하는 데이터 삭제
3.1.4. 모든 데이터 삭제
// 모든 데이터 삭제
sessionStorage.clear(); // Session Storage의 모든 데이터 삭제
3.2. Session Storage 예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Storage Example</title>
</head>
<body>
<h1>Session Storage Example</h1>
<input type="text" id="sessionUser" placeholder="Enter your session username">
<button id="saveSessionButton">Save Session</button>
<button id="loadSessionButton">Load Session</button>
<script>
document.getElementById('saveSessionButton').addEventListener('click', () => {
const sessionUsername = document.getElementById('sessionUser').value;
sessionStorage.setItem('sessionUser', sessionUsername); // Session Storage에 저장
alert('Session Username saved!');
});
document.getElementById('loadSessionButton').addEventListener('click', () => {
const sessionUsername = sessionStorage.getItem('sessionUser'); // Session Storage에서 읽기
alert('Saved Session Username: ' + sessionUsername);
});
</script>
</body>
</html>
- 이 코드는 사용자가 입력한 세션 사용자 이름을 Session Storage에 저장하고, 저장된 이름을 읽어오는 예시입니다.
4. Web Storage API의 제한사항
4.1. 데이터 크기 제한
각 도메인당 Local Storage와 Session Storage에 저장할 수 있는 데이터의 양은 일반적으로 5MB로 제한됩니다. 이는 브라우저에 따라 다를 수 있습니다.
4.2. 문자열만 저장 가능
Web Storage API는 문자열만 저장할 수 있으며, 다른 데이터 타입(예: 객체, 배열)은 문자열로 변환하여 저장해야 합니다. JSON.stringify() 및 JSON.parse()를 사용하여 객체를 문자열로 변환하고 다시 객체로 변환할 수 있습니다.
4.3. 보안 문제
Web Storage는 클라이언트 측에 저장되므로 민감한 데이터를 저장하는 것은 피해야 합니다. 보안 취약점에 대비하기 위해 HTTPS를 사용하고, 가능한 경우 쿠키와 같은 다른 저장 방법을 고려해야 합니다.
요약
JavaScript Web Storage API는 웹 애플리케이션이 클라이언트 측에서 데이터를 저장하고 관리할 수 있도록 하는 기능을 제공합니다. Local Storage와 Session Storage를 사용하여 사용자의 데이터를 효율적으로 저장하고, 필요한 경우 이를 쉽게 가져올 수 있습니다.
- Local Storage: 데이터를 영구적으로 저장하며, 사용자가 명시적으로 삭제할 때까지 유지됩니다.
- Session Storage: 사용자가 탭을 닫을 때까지 데이터를 저장합니다.
- 주요 메서드:
setItem(),getItem(),removeItem(),clear().
JavaScript의 Web Storage API를 활용하여 더 나은 사용자 경험과 효율적인 데이터 관리를 구현할 수 있습니다.