자바스크립트 LocalStorage 사용 방법과 쿠기와 차이점

2023.08.09

자바스크립트를 사용하면서 값을 저장해야 하는 경우 변수를 사용합니다.

화면 이동이 있거나 영구적으로 저장해야 하는 경우 DB에 저장을 하거나 임시적으로 저장하고 싶은 경우 쿠키(cookie)를 사용하기도 합니다.

이처럼 일정 시간 또는 영구적으로 값을 저장하고 싶은 경우에 사용할 수 있는 것이 WebStorage API인 로컬 스토리지(LocalStorage)가 있습니다.

 

LocalStorage란?

・데이터를 사용자 로컬에 보존하는 방식.

・데이터를 저장, 덮어쓰기, 삭제 등 조작 가능.

・자바스크립트(JavaScript)로 조작.

・모바일에서도 사용 가능

 

쿠키와 차이점

・유효 기간이 없고 영구적으로 이용 가능

・5MB까지 사용 가능 (쿠키는 4KB까지)

・필요할 때 언제든 사용 가능 (쿠키는 서버 접속시에 자동 송신)

 

LocalStorage 기본 구성

・키(key)와 값(value)을 하나의 세트로 저장.

・도메인과 브라우저별로 저장.

・값은 반드시 문자열로 저장됨.

 

LocalStorage 사용 방법

샘플 소스를 가지고 사용 방법을 확인해보도록 하겠습니다.

아래 소스의 function init() {} 함수 안에 LocalStorage 조작을 작성하도록 하겠습니다.

 

기본 샘플

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>LocalStorage Sample</title>
<script type="text/javascript">
function init() {
}
</script>
</head>
<body onload="init()">
	<div id="result"></div>
</body>
</html>

 

데이터 추가하기

function init() {
	//localStorage 데이터 추가 방법 3가지
	localStorage.Test = "Sample";
	localStorage["Test"] = "Sample";
	localStorage.setItem("Test", "Sample");
}

 

데이터 추가 방법을 3가지 작성해봤습니다.

3가지 방법 모두 데이터가 저장되는 방식은 같습니다.

키와 값으로 저장됩니다.

 

데이터 취득하기

function init() {
	//LocalStorage 데이터 취득 방법 3가지
	var val = localStorage.Test;
	var val = localStorage["Test"];
	var val = localStorage.getItem("Test");

	//취득 데이터 출력
	document.querySelector("#result").innerHTML = val;
}

 

localStorage에 저장한 값을 취득하여 화면에 출력하고 있습니다.

키값인 Test으로 값을 취득하고 있습니다.

 

 

데이터 삭제하기

삭제는 removeItem(key)를 사용합니다.

function init() {

	//localStorage 데이터 삭제
	localStorage.removeItem("Test"); 

	//localStorage 데이터 취득
	var val = localStorage.Test;

	//취득 데이터 출력
	document.querySelector("#result").innerHTML = val;
}

 

removeItem()를 실행했기 때문에 해당 키와 값이 삭제됩니다.

삭제된 키로 데이터를 취득하고 있기 때문에 취득한 값은 없습니다.

화면 출력에는 undefined이 표시됩니다.

 

모든 데이터 삭제

clear()는 localStorage에 저장한 모든 데이터를 삭제합니다.

우선 clear() 테스트를 위해 데이터를 작성해놓겠습니다.

function init() {
	localStorage.setItem("A", "A입니다."); 
	localStorage.setItem("B", "B입니다."); 
	localStorage.setItem("C", "C입니다."); 
	localStorage.setItem("D", "D입니다."); 
	localStorage.setItem("E", "E입니다."); 

	var val = localStorage.getItem("A") + " " +
	localStorage.getItem("B") + " " +
	localStorage.getItem("C") + " " +
	localStorage.getItem("D") + " " +
	localStorage.getItem("E");

	document.querySelector("#result").innerHTML = val;
}

 

위 예제를 실행하면 아래와 같이 화면에 출력됩니다.

A입니다. B입니다. C입니다. D입니다. E입니다.

clear()를 사용해서 데이터를 전부 삭제해보겠습니다.

function init() {

	localStorage.clear();

	var val = localStorage.getItem("A") + " " +
	localStorage.getItem("B") + " " +
	localStorage.getItem("C") + " " +
	localStorage.getItem("D") + " " +
	localStorage.getItem("E");

	document.querySelector("#result").innerHTML = val;
}

 

아래와 같이 표시가 됩니다.

null null null null null

 

삭제를 해 취득할 값이 없기 때문에 전부 null로 표시됩니다.

 

SessionStorage과 차이점

localStorage 외에도 sessionStorage도 있습니다.

사용 방법은 localStorage와 같습니다.

 

차이점

localStorage – 세션이 끊겨도 사용 가능.

sessionStorage – 같은 세션만 사용 가능.

 

sessionStorage의 경우에는 동일한 세션에서만 사용 가능하지만 localStorage은 세션이 끊기거나 동일한 세션이 아니더라고 사용 가능합니다.

댓글