상세 컨텐츠

본문 제목

[Javascript] 웹브라우저 저장소

Web/Javascript

by 클리엘 클리엘 2020. 7. 16. 03:18

본문

저장소라는 기능은 마치 애플리케이션을 만들 때 데이터베이스를 이용하는 것처럼 사용자 브라우저의 저장소에 데이터를 저장하는 곳을 말합니다. 다른 일반적인 방법으로는 쿠키라는 것을 이용할 수 있지만 그것과는 좀 다른 것입니다. 참고로 이 기능은 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('저장소를 지원하지 않음');
	}
});

 

'Web > Javascript' 카테고리의 다른 글

[Javascript] 웹브라우저 저장소  (0) 2020.07.16
[javascript] 쿠키(Cookies)  (0) 2020.07.04
[javascript / jQuery] 크로스 도메인  (0) 2020.07.03
[javascript] 예외 처리  (0) 2020.05.30
[javascript] 이벤트 처리  (0) 2020.05.29
[javascript] 문서 객체 다루기  (0) 2020.05.27

관련글 더보기

댓글 영역