Web/Javascript
[Javascript] 웹브라우저 저장소
클리엘
2020. 7. 16. 03:18
728x90
저장소라는 기능은 마치 애플리케이션을 만들 때 데이터베이스를 이용하는 것처럼 사용자 브라우저의 저장소에 데이터를 저장하는 곳을 말합니다. 다른 일반적인 방법으로는 쿠키라는 것을 이용할 수 있지만 그것과는 좀 다른 것입니다. 참고로 이 기능은 HTML5부터 지원하는 기능이므로 웹브라우저가 HTML5를 지원해야 합니다.
웹 브라우저가 저장소를 지원하는지의 여부는 window객체를 통해 확인할 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script>
$(function() {
if (window.localStorage) {
}
else {
alert('저장소를 지원하지 않음');
}
});
</script>
</head>
<body>
<div>
</div>
</body>
</html>예제에서는 localStorage를 통해서 로컬저장소 지원 여부를 확인해 보았습니다. 저장소는 로컬 저장소와 세션 자장소는 2가지가 존재하는데 로컬 저장소는 명시적으로 데이터를 삭제하지 않는 이상 계속 남아있게 할 수 있으나 세션 저장소는 웹브라우저가 종료될 때까지만 데이터를 저장할 수 있는 특징이 있습니다.
localStorage는 로컬저장소를 의미하며 sessionStorage는 세션 저장소를 의미하는데 이 둘의 사용법은 완전히 동일하며 데이터를 저장하거나 가져올때등 여러 가지 기능을 수행하기 위해서 아래와 같은 메서드를 제공하고 있습니다.
| setItem(key, value) | 키와 값을 쌍으로 데이터를 저장합니다. |
| getItem(key) | 키를 통해 값을 가져옵니다. |
| removeItem(key) | 키를 통해 값을 삭제합니다. |
| keyy(number) | 저장소 위치값(number)을 통해서 데이터를 가져옵니다. |
| clear() | 저장소의 모든 데이터를 삭제합니다. |
위 메서드를 통해 데이터를 저장하려면 다음과 같이 할 수 있습니다.
$(function() {
if (window.localStorage) {
localStorage.setItem('02', '서울');
localStorage.setItem('053', '대구');
}
else {
alert('저장소를 지원하지 않음');
}
});
저장된 데이터는 getItem() 메서드를 통해 가져옵니다.
$(function() {
if (window.localStorage) {
localStorage.setItem('02', '서울');
localStorage.setItem('053', '대구');
//단일값 가져오기
alert(localStorage.getItem('053'));
//순회하기
for (var key in localStorage)
alert(localStorage.getItem(key));
}
else {
alert('저장소를 지원하지 않음');
}
});전체를 삭제하려면 clear() 메서드를 사용합니다.
$(function() {
if (window.localStorage) {
localStorage.clear();
}
else {
alert('저장소를 지원하지 않음');
}
});
728x90