로컬스토리지(local storage)를 이용해서 데이터를 저장해봅시다.

로컬 스토리지를 확인해보세요.

개발자모드(크롬에서 F12)를 누르고 Application 탭을 눌러보세요. 좌측에 local storage가 있는 것을 확인할 수 있습니다. 눌러보면 key와 value로 이루어진 형태를 볼 수 있습니다.

로컬 스토리지의 위치입니다.

다른 페이지를 실행 중에 로컬스토리지를 확인하셨다면 이미 많은 데이터들이 저장되어 있는 것을 확인할 수 있습니다.

로컬스토리지란 무엇일까요?

세션이나 쿠키 같이 데이터를 저장하는 장소 중의 하나입니다. 로컬스토리지는 일정한 기간이 지나면 삭제되는 세션과는 달리 데이터의 만료기간이 없이 계속 저장됩니다. 데이터의 값은 항상 문자로 저장하셔야 하고, 간편하게 불러올 수 있습니다. 간단한 예시를 통해서 사용법을 배워보도록 하겠습니다.

getItem과 setItem

데이터의 값을 불러올 때 사용하는 메소드가 getItem이고, 값을 저장할 때 쓰는 메소드가 setItem입니다. 사용자의 이름을 저장하는 간단한 예시를 만들어보면서 활용해보겠습니다.

	<!-- body 태그 안에 넣어주세요. -->
	<h1>안녕하세요.</h1>
	<script>
	const name = prompt("이름을 입력해주세요.");
	console.log(name);
	</script>

view raw index.html hosted with ❤ by GitHub

사용자의 닉네임을 받아서 콘솔에 나타내는 간단한 코드입니다. 해당 코드를 사용자의 이름이 저장되어 있으면 저장된 이름을 나타내도록 하고, 이름이 저장되어 있지 않으면 사용자의 이름을 받아서 저장한 뒤에 이름을 나타내도록 해보겠습니다.

	const greeting = document.querySelector("h1");
	const yourName = localStorage.getItem("name");
	if (yourName === null) {
	const name = prompt("이름을 입력해주세요.");
	localStorage.setItem("name", name);
	greeting.innerHTML = `안녕하세요. ${name}`;
	} else {
	greeting.innerHTML = `안녕하세요. ${yourName}`;
	}

view raw script.js hosted with ❤ by GitHub

스크립트 태그 안에 내용을 위의 코드로 바꿔주세요. 코드의 내용을 하나씩 살펴볼까요? 로컬스토리지에서 key가 name인 값을 찾습니다. 해당 값이 없으면(저장된 이름이 없으면) 해당 메소드는 null을 리턴합니다. 그 후 조건문을 통해 값이 null인지 확인하고 null일 경우 이름을 받고 그 이름을 name이라는 key로 로컬스토리지에 저장합니다. 그리고 h1의 내용을 "안녕하세요. 이름"으로 변경해줍니다. 만약 이름이 저장되어 있으면 그 이름을 갖고 와서 인사를 해줍니다.

저는 러닝워터라고 입력했습니다.

로컬스토리지를 확인해보시면 우리가 입력한 이름이 저장되어 있는 것을 확인할 수 있습니다. 새로고침을 눌러보세요. 로컬스토리지에 있는 데이터는 지워지지 않기 때문에 그대로 닉네임이 사용됩니다. 우리가 로컬스토리지의 이름을 지운다면 다시 우리의 이름을 물어보게 됩니다.

로컬스토리지를 이용해서 문자로 된 간단한 정보들을 저장할 수 나만의 사이트를 제작할 수 있습니다. 한 번 자신만의 시작 페이지를 만들어보세요.

공감은 제작자에게 큰 힘이 됩니다.