웹 스토리지: 로컬 및 세션 스토리지 사용하기
웹 스토리지(Web Storage)는 자바스크립트 API 입니다. 사용자의 브라우저에 데이터를 저장하는 메커니즘으로, 쿠키보다 용량이 크다는 장점이 있어서 HTTP 헤더로 정보가 전송되지 않는 영구 데이터를 사용자의 장치에 저장할 때 쿠키의 대안으로 사용됩니다. 이 기술은 클라이언트에 데이터를 저장할 수 있으므로, 잘 활용하면 브라우저 세션 간 정보 저장을 응용한 다양한 기능을 만들어낼 수 있습니다. 이로써 사용자 경험을 매우 향상시킬 수 있죠.
웹 스토리지의 핵심 개념
웹 스토리지는 두 가지 형태로 제공됩니다: 로컬 스토리지와 세션 스토리지가 있어요.
로컬 스토리지
- 데이터가 사용자의 브라우저에 영구적으로 저장됩니다.
- 사용자가 브라우저를 닫더라도 데이터가 유지됩니다.
- localStorage 객체를 사용하여 데이터를 저장하고 접근합니다.
세션 스토리지
- 데이터가 브라우저 세션 동안에만 저장됩니다.
- 사용자가 브라우저 탭이나 창을 닫으면 데이터가 삭제됩니다.
- sessionStorage 객체를 사용하여 데이터를 저장하고 접근합니다.
웹 스토리지 사용법
데이터 저장
localStorage.setItem('key', 'value');
sessionStorage.setItem('sessionKey', 'sessionValue');웹 스토리지에 데이터를 저장하는 방법은 간단합니다. 키와 값을 지정하여 저장할 수 있습니다.
데이터 읽기
var value = localStorage.getItem('key');
var sessionValue = sessionStorage.getItem('sessionKey');저장된 데이터를 읽어오는 것도 쉽습니다. 키를 통해 값을 검색할 수 있습니다.
데이터 제거
localStorage.removeItem('key');
sessionStorage.removeItem('sessionKey');저장된 데이터를 제거하는 것도 가능합니다.
실습 예제1: 사용자 선호 설정 저장
사용자의 언어 선호 설정을 로컬 스토리지에 저장하고 불러오는 예제입니다.
HTML:
<select id="languageSelect">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
</select>
<script>
// 이전에 저장된 언어 설정을 불러옵니다.
document.getElementById('languageSelect').value =
localStorage.getItem('languagePreference') || 'en';
// 언어 설정을 저장합니다.
document.getElementById('languageSelect').addEventListener('change', function() {
localStorage.setItem('languagePreference', this.value);
});
</script>이 예제는 사용자가 선택한 언어를 로컬 스토리지에 저장하여, 사용자가 다음에 페이지를 방문할 때 같은 설정을 유지합니다.
고급 웹 스토리지 활용
웹 스토리지의 활용은 기본적인 데이터 저장 및 검색뿐만 아니라 보다 고급 기능 구현에도 사용될 수 있습니다.
복잡한 데이터 저장
- 웹 스토리지는 문자열만 저장할 수 있으므로, 객체나 배열과 같은 복잡한 데이터 구조는 JSON.stringify()를 사용하여 문자열로 변환하여 저장해야 합니다.
- 데이터를 다시 사용할 때는 JSON.parse()로 문자열을 원래의 데이터 형식으로 변환합니다.
예시:
var userSettings = { theme: 'dark', fontSize: 'medium' };
localStorage.setItem('userSettings', JSON.stringify(userSettings));
var retrievedSettings = JSON.parse(localStorage.getItem('userSettings'));스토리지 이벤트 활용
- 웹 스토리지의 변경사항을 감지하기 위해 storage 이벤트를 사용할 수 있습니다.
- 이를 통해 다른 탭이나 창에서 발생한 웹 스토리지의 변경을 감지하고, 해당 변경사항에 따라 페이지를 동적으로 업데이트할 수 있습니다.
window.addEventListener('storage', function(event) {
if (event.key === 'userSettings') {
updateSettings(JSON.parse(event.newValue));
}
});
function updateSettings(settings) {
// 페이지 설정을 업데이트하는 로직
}보안과 용량 제한
- 웹 스토리지는 로컬에 데이터를 저장하기 때문에 중요한 정보(비밀번호, 개인정보 등)의 저장은 피해야 합니다.
- 로컬 스토리지의 경우 대부분의 브라우저에서 약 5MB의 데이터를 저장할 수 있습니다.
실습 예제2: 할 일 목록 관리
로컬 스토리지를 사용하여 사용자의 할 일 목록을 관리하는 예제입니다.
HTML:
<input type="text" id="newTodo">
<button id="addTodo">Add Todo</button>
<ul id="todoList"></ul>
<script>
// 할 일 목록을 불러오고 표시합니다.
function loadTodos() {
var todos = JSON.parse(localStorage.getItem('todos')) || [];
var todoList = document.getElementById('todoList');
todoList.innerHTML = '';
todos.forEach(function(todo) {
var li = document.createElement('li');
li.textContent = todo;
todoList.appendChild(li);
});
}
// 새로운 할 일을 추가합니다.
document.getElementById('addTodo').addEventListener('click', function() {
var newTodo = document.getElementById('newTodo').value;
var todos = JSON.parse(localStorage.getItem('todos')) || [];
todos.push(newTodo);
localStorage.setItem('todos', JSON.stringify(todos));
loadTodos();
});
loadTodos();
</script>이 예제에서는 사용자가 입력한 할 일을 로컬 스토리지에 저장하고, 페이지를 새로고침하거나 다시 방문해도 이전에 저장된 할 일 목록을 유지합니다.
결론
웹 스토리지는 사용자의 로컬 환경에 데이터를 저장하여 웹 애플리케이션의 기능을 향상시키는 강력한 도구입니다. 이를 통해 사용자의 설정, 상태, 선호도 등을 관리하고, 웹 애플리케이션의 반응성과 사용자 경험을 개선할 수 있습니다. 또한, JSON과 함께 사용하여 보다 복잡한 데이터를 쉽게 저장하고 관리할 수 있다는 장점이 있습니다. 꼭 공부해야되는 필수 요소 중 하나라는 점 잊지마세요!
댓글