쇼핑몰에 들어가 로그인을 하지 않은 상태로 장바구니에 담아보자. 그리고 다른 페이지를 전전하다, 다시 장바구니에 들어가보자.
그러면 장바구니는 텅 비어있는가? 아니다. 장바구니에는 아까 담아놓은 상품이 그대로 들어가있다.
서버에서 로그인하지 않은 사용자의 데이터도 관리하는 걸까? 물론 하려면 할 수는 있다. 하지만 굳이 그래야 할까? 로그인하지 않은 사용자의 데이터마저도 저장하면 그만큼 서버 자원과 네트워크 트래픽이 추가로 발생할 것이기에, 시스템에 부담을 줄 수 있다.
그러면 어떻게 해야할까? 방법은 서버가 아니라 클라이언트 측 저장소를 활용하는 것이다. 이를 통해 서버와의 통신을 최소화 하면서도, 사용자가 웹 사이트를 탐색하는 동안 장바구니에 담긴 상품을 유지할 수 있다.
이처럼 클라이언트 측 저장소를 활용하면 서버의 자원 낭비를 줄이고, 필요하다면 데이터를 빠르게 반환할 수 있는 이점이 있다. 그리고 JS에서는 이러한 저장소 기술을 구현하기 위해 SessionStorage, LocalStorage를 주로 이용한다.
LocalStorage vs SessionStorage
JS에서 데이터를 클라이언트 저장소에 저장하기 위해 대표적으로 사용되는 기술들이다. 그리고 차이점은 아래와 같다.
| LocalStorage | SessionStorage | |
| 데이터 유지 | 영구 | 세션 |
| 저장 위치 | 디스크 | RAM |
| 탭 간 공유 | 가능 | 불가능 |
| 용량 제한 | 보통 5MB | 보통 5MB |
위에서 보면 알 수 있듯, LocalStorage는 기본적으로 데이터를 디스크에 저장한다.
* 윈도우 크롬의 경우 C:\Users\사용자명\AppData\Local\Google\Chrome\User Data\Default\Local Storage\leveldb
이러한 특징으로 인해 별도로 삭제하지 않는 이상 데이터가 영구적으로 유지된다. 이는 웹 브라우저나 PC를 껐다 켜도 마찬가지이다.
* 이러한 특성으로 인해 개인정보 등 민감한 정보는 절대 localStorage에 저장하면 안된다.
또한 데이터가 공유되기에 서로 다른 브라우저 탭에서도 데이터가 공유되어 호출이 가능하다.
그에 반해 SessionStorage는 데이터를 ROM에 저장한다. 웹 브라우저나 PC가 꺼지면 당연히 곧바로 사라지고, 데이터가 공유되지 않기에 서로 다른 탭에서 공유가 불가능하다.
한 번 테스트를 위해 아래와 같은 간단한 HTML 파일을 만들어보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Session Storage Example</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
textarea {
width: 300px;
height: 100px;
margin-top: 10px;
resize: none;
}
</style>
</head>
<body>
<input type="text" id="inputText" placeholder="Enter text...">
<button id="enterBtn">ENTER</button>
<textarea id="outputArea" disabled></textarea>
<script>
document.addEventListener("DOMContentLoaded", function() {
const inputText = document.getElementById("inputText");
const enterBtn = document.getElementById("enterBtn");
const outputArea = document.getElementById("outputArea");
// 페이지 로딩 시 sessionStorage에서 데이터 가져오기
if (sessionStorage.getItem("savedText")) {
outputArea.value = sessionStorage.getItem("savedText");
}
enterBtn.addEventListener("click", function() {
const text = inputText.value;
sessionStorage.setItem("savedText", text);
outputArea.value = text;
});
});
</script>
</body>
</html>100% vs 100vh
100%는 부모 태그의 100%를 사용한다는 의미이다. 만약 부모 태그가 100%가 아니라면 자식 태그를 100%로 설정하더라도 이는 부모 태그 크기의 100%이지 화면의 100%가 아니다. 즉, 부모 태그가 화면의 50%라면, 자식 태그를 100%로 설정하더라도 이것은 부모 태그가 지정한 50%를 100% 보여준다는 뜻이다.
결과적으로 화면의 50%를 보여주는 것입니다. 반면 100vh는 부모 태그와는 상관없이 보이는 Viewport Height의 100%를 다 쓰겠다는 의미입니다.
간단하게 설명하자면, textarea에 입력한 데이터를 저장하고 아래에서 불러오는 페이지이다.
SessionStorage이기에 아래와 같이 새로고침 등이 일어나도 데이터가 유지되는 것을 볼 수 있다.
그러면 껐다 키면 어떻게 될까?
앞서 말했다시피 SessionStorage는 공유를 하지 않기 때문에 당연히 웹 브라우저를 껐다 키면 데이터가 삭제되어 더 이상 데이터가 존재하지 않게 된다.
이번에는 localStorage를 사용해보자.
아래와 같이 sessionStorage를 사용하는 부분을 localStorage를 사용하도록 수정한다.
이제 테스트를 해보자
아까와 달리 웹 브라우저를 껐다 켜도 데이터가 여전히 유지되고 있음을 확인할 수 있다.
이렇게 설정된 데이터는 디스크에 저장되기에 다른 세션 (탭) 에서도 유지가 되고, PC를 껐다 켜도 마찬가지로 유지가 된다.
그리고 localStorage와 sessionStorage 모두 동일하게 clear() 함수로 모든 데이터를 삭제하거나, removeItem("데이터명") 함수를 사용해 특정 데이터만 삭제할 수 있다.
다만 타이머를 정해놓고 몇 초 후 삭제하거나 하는 기능은 제공되지 않으므로, 만약 이를 구현하기 위해서라면 setInterval 등을 통해 별도의 구현이 필요하다.
// 데이터 저장 (10초 후 만료)
function saveDataWithExpiry(key, value) {
const expiryTime = Date.now() + 10000; // 현재 시간 + 10초
localStorage.setItem(key, JSON.stringify({ value, expiryTime }));
}
// 데이터 가져오기 (만료되면 자동 삭제)
function loadDataWithExpiry(key) {
const itemStr = localStorage.getItem(key);
if (itemStr == null || typeof itemStr === 'undefined') return null;
const item = JSON.parse(itemStr);
if (Date.now() > item.expiryTime) {
localStorage.removeItem(key);
return null;
}
return item.value;
}
// 사용 예시
saveDataWithExpiry("testKey", "Hello!");
// 주기적으로 체크해서 만료된 데이터 삭제 (10초마다 실행)
setInterval(() => {
loadDataWithExpiry("testKey");
}, 1000);*대충 이렇게 하면 될 것 같다. (돌려보진 않았다.)
'언어 > JavaScript' 카테고리의 다른 글
| [JS] setInterval, setTimeout (0) | 2022.07.26 |
|---|---|
| [IFrame] 부모-자식 간 통신 (0) | 2021.10.16 |
| [Ajax] Ajax를 활용한 통신 (0) | 2021.10.16 |
| [JQury] 제이쿼리 사용법 (0) | 2021.10.14 |
