4.1 localStorage와 sessionStorage
웹 스토리지는 웹 애플리케이션이 데이터를 사용자의 브라우저에 저장할 수 있게 해줘. 방문 간에 또는 페이지 탐색 시 정보를 저장하는 데 유용해. HTML5에서 두 가지 주요 웹 스토리지 유형을 도입했어: localStorage와 sessionStorage.
localStorage란?
localStorage는 사용자의 브라우저에 무기한으로 저장되는 데이터 저장소야. 브라우저를 닫거나 컴퓨터를 재부팅해도 localStorage의 데이터는 그대로 있어. 사용자 설정이나 장바구니 데이터처럼 세션 간에 저장해야 하는 정보를 보관하는 데 유용해.
sessionStorage란?
sessionStorage는 사용자의 브라우저에서 하나의 세션 동안만 저장되는 데이터 저장소야. sessionStorage의 데이터는 브라우저 탭이나 창이 열려 있는 동안에만 접근할 수 있어. 세션 동안에만 필요한 폼 데이터나 앱 상태 같은 데이터를 저장하는 데 유용해.
주요 메서드와 속성
localStorage와 sessionStorage의 메서드와 속성
두 종류의 웹 스토리지 모두 동일한 API를 가지고 있어, 데이터를 처리하는 메서드와 속성을 포함해:
setItem(key, value): 지정된 키로 값을 저장해.getItem(key): 지정된 키 아래 저장된 값을 반환해.removeItem(key): 지정된 키로 저장된 값을 삭제해.clear(): 저장소의 모든 데이터를 삭제해.key(index): 인덱스에 해당하는 키를 반환해.length: 저장소에 있는 키-값 쌍의 수를 반환해.
4.2 사용 예제
localStorage 사용 예제:
HTML
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// localStorage에 값 저장
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Username saved!');
});
// localStorage에서 값 로드
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Username loaded!\n' + `${savedUsername}`);
} else {
alert('No username found.');
}
});
</script>
</body>
</html>
sessionStorage 사용 예제:
HTML
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// sessionStorage에 값 저장
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Data saved in session!');
});
// sessionStorage에서 값 로드
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Data loaded from session!\n' + `${savedData}`);
} else {
alert('No data found in session.');
}
});
</script>
</body>
</html>
4.3 localStorage와 sessionStorage 비교
localStorage와 sessionStorage의 차이점
- 저장 기간:
- localStorage는 사용자가 직접 삭제하거나 스크립트로 삭제하기 전까지 무기한으로 데이터를 저장해.
- sessionStorage는 현재 세션(탭이나 창)의 기간 동안만 데이터를 저장해.
- 가시성 범위:
- localStorage의 데이터는 동일한 도메인의 모든 탭과 창에서 접근할 수 있어.
- sessionStorage의 데이터는 현재 탭이나 창에서만 접근 가능해.
- 저장소 크기:
- 보통 localStorage와 sessionStorage는 도메인당 5-10MB의 제한이 있어, 브라우저에 따라 달라질 수 있어.
localStorage와 sessionStorage 사용 비교 예제:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// localStorage 사용
localStorage.setItem('persistentData', 'This data persists across sessions');
console.log(localStorage.getItem('persistentData')); // "This data persists across sessions"
// sessionStorage 사용
sessionStorage.setItem('temporaryData', 'This data persists only during the session');
console.log(sessionStorage.getItem('temporaryData')); // "This data persists only during the session"
</script>
</body>
</html>
4.4 사용 사례
localStorage를 사용할 때:
- 세션 간에 저장해야 하는 데이터, 예를 들어 사용자 설정이나 선호도를 저장할 때
- 하나의 도메인에서 모든 탭과 창에서 접근 가능한 데이터를 저장할 때
- 자주 변경되지 않는 데이터를 저장할 때
sessionStorage를 사용할 때:
- 현재 세션 동안에만 필요한 임시 데이터를 저장할 때
- 현재 탭이나 창에 특화된 데이터를 저장할 때
- 탭이나 창을 닫을 때 데이터를 삭제해야 할 때
보안과 개인정보 보호
웹 스토리지를 사용할 때 보안과 개인정보 보호 문제를 고려하는 게 중요해:
- 암호화: 웹 스토리지의 데이터는 기본적으로 암호화되지 않아. 비밀 정보를 저장해야 할 경우, 저장 전에 데이터를 암호화하는 게 좋아.
- 크로스 도메인 공격: 웹 스토리지는 하나의 도메인 내에서 작동해, 다른 도메인에서 데이터에 접근할 수 없어. 그러나 XSS(교차 사이트 스크립팅) 공격을 방지해, 공격자가 스토리지의 데이터에 접근할 수 없도록 해야 해.
- 데이터 용량 제한: 필요한 정보만 저장하고, 오래된 데이터를 주기적으로 삭제해 스토리지가 가득 차는 걸 피해야 해.
GO TO FULL VERSION