JavaScript의 로컬 스토리지(Local Storage)는 브라우저에 데이터를 영구적으로 저장할 수 있게 해주는 기능입니다. 이는 사용자가 페이지를 새로고침하거나 브라우저를 종료해도 데이터가 유지되는 특징을 가집니다. 로컬 스토리지는 클라이언트 측 저장소로, 세션 스토리지(Session Storage)와 함께 웹 스토리지 API(Web Storage API)의 일부입니다.
1. 로컬 스토리지의 주요 특징
- 데이터 영구성: 브라우저를 닫아도 데이터가 삭제되지 않고 영구적으로 저장됩니다.
- 키-값 쌍: 로컬 스토리지는 문자열 형식의 키-값 쌍으로 데이터를 저장합니다.
- 크기 제한: 일반적으로 도메인당 약 5MB의 저장 용량을 제공합니다.
- 도메인 단위: 동일한 도메인 내에서만 데이터에 접근할 수 있습니다.
2. 로컬 스토리지 기본 사용법
2.1 데이터 저장
localStorage.setItem(key, value) 메서드를 사용하여 데이터를 저장합니다. 키와 값은 모두 문자열이어야 합니다.
localStorage.setItem('username', 'JohnDoe');2.2 데이터 읽기
localStorage.getItem(key) 메서드를 사용하여 저장된 데이터를 읽습니다.
const username = localStorage.getItem('username');
console.log(username); // "JohnDoe"2.3 데이터 삭제
특정 데이터를 삭제하려면 localStorage.removeItem(key) 메서드를 사용합니다.
localStorage.removeItem('username');모든 데이터를 삭제하려면 localStorage.clear() 메서드를 사용합니다.
localStorage.clear();2.4 데이터 업데이트
기존 데이터를 덮어쓰기 위해 동일한 키로 데이터를 다시 저장합니다.
localStorage.setItem('username', 'JaneDoe');3. 로컬 스토리지 활용 예
3.1 객체 저장 및 읽기
로컬 스토리지는 문자열만 저장할 수 있기 때문에, 객체를 저장할 때는 JSON.stringify()를 사용하고, 객체를 읽을 때는 JSON.parse()를 사용해야 합니다.
const user = {
name: 'John Doe',
age: 30
};
// 객체를 문자열로 변환하여 저장
localStorage.setItem('user', JSON.stringify(user));
// 저장된 문자열을 객체로 변환하여 읽기
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // "John Doe"3.2 세션 유지
로컬 스토리지를 사용하여 사용자가 로그아웃하기 전까지 세션 정보를 유지할 수 있습니다.
// 사용자가 로그인할 때
localStorage.setItem('isLoggedIn', 'true');
// 사용자가 페이지를 새로고침할 때
if (localStorage.getItem('isLoggedIn') === 'true') {
console.log('User is still logged in');
} else {
console.log('User is logged out');
}
// 사용자가 로그아웃할 때
localStorage.removeItem('isLoggedIn');4. 로컬 스토리지의 이벤트
로컬 스토리지는 storage 이벤트를 발생시킵니다. 이 이벤트는 동일한 도메인 내에서 다른 창이나 탭이 로컬 스토리지 데이터를 변경할 때 발생합니다.
window.addEventListener('storage', function(event) {
console.log('Key changed: ', event.key);
console.log('New value: ', event.newValue);
console.log('Old value: ', event.oldValue);
});5. 로컬 스토리지의 제한 사항
- 크기 제한: 도메인당 약 5MB로 제한되어 있습니다.
- 동기적 처리: 모든 로컬 스토리지 작업은 동기적으로 처리되므로 대용량 데이터 작업 시 성능 저하가 발생할 수 있습니다.
- 보안: 로컬 스토리지는 클라이언트 측에 저장되므로 민감한 데이터를 저장하는 것은 권장되지 않습니다.
6. 실용적인 예제
6.1 테마 설정 저장
사용자가 선택한 테마를 로컬 스토리지에 저장하여 페이지를 새로고침해도 테마 설정이 유지되도록 할 수 있습니다.
// 테마 변경 함수
function setTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
}
// 페이지 로드 시 저장된 테마 적용
document.addEventListener('DOMContentLoaded', function() {
const savedTheme = localStorage.getItem('theme') || 'light';
setTheme(savedTheme);
});
// 버튼 클릭 시 테마 변경
document.getElementById('theme-toggle').addEventListener('click', function() {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
});6.2 폼 데이터 저장
사용자가 입력한 폼 데이터를 로컬 스토리지에 저장하여 페이지를 새로고침해도 입력 내용이 유지되도록 할 수 있습니다.
const form = document.getElementById('myForm');
// 폼 데이터 저장
form.addEventListener('input', function() {
const formData = new FormData(form);
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
localStorage.setItem('formData', JSON.stringify(data));
});
// 페이지 로드 시 저장된 폼 데이터 불러오기
document.addEventListener('DOMContentLoaded', function() {
const storedData = JSON.parse(localStorage.getItem('formData'));
if (storedData) {
Object.keys(storedData).forEach(key => {
const input = form.elements[key];
if (input) {
input.value = storedData[key];
}
});
}
});결론
로컬 스토리지는 웹 애플리케이션에서 사용자 설정이나 세션 데이터를 영구적으로 저장하는 데 매우 유용한 도구입니다. 문자열 형식의 키-값 쌍으로 데이터를 저장하고, JSON을 사용하여 객체를 저장할 수 있으며, 다양한 이벤트와 메서드를 통해 데이터를 쉽게 조작할 수 있습니다. 다만, 보안에 주의하고, 중요한 데이터는 서버 측에 저장하는 것이 좋습니다.