Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript localStorage 완벽 가이드: 브라우저에 데이터 저장하는 방법

웹 애플리케이션은 순식간에 복잡해질 수 있습니다. 개발자로 일하면서 배운 것 중 하나는, 평범한 자바스크립트(JavaScript)만으로도 기회만 주어진다면 정말 다양한 작업을 해낼 수 있다는 점입니다.

localStorage API는 서버가 필요 없는 간단한 애플리케이션에서 데이터베이스 사용을 대체할 수 있는 강력한 내장 기능입니다. 이 API를 활용하면 데이터 조각들을 로컬에 저장하고, 애플리케이션이 언제든 접근할 수 있게 만들 수 있습니다.

이 가이드에서는 자바스크립트에서 localStorage 메서드를 사용하는 방법을 알아보겠습니다. 나중에 다시 불러올 수 있도록 폼(form) 내용을 웹 페이지에 저장하는 실전 예제도 함께 살펴보겠습니다. 그럼 시작해 보겠습니다!

localStorage란 무엇인가?

localStorage는 웹 스토리지 API(Web Storage API)의 일부입니다. 이 API를 사용하면 사용자의 브라우저 안에 데이터를 저장하고, 애플리케이션이 해당 데이터에 접근할 수 있습니다.

웹 스토리지 API가 유용한 이유는, 사용자 세션과 관련된 모든 데이터를 일일이 데이터베이스로 전송할 필요가 없기 때문입니다. 예를 들어 사용자가 사이트에서 다크 모드를 켰다면 클라이언트 측에서 추적하면 되고, 사용자가 폼을 임시 저장했다면 작성 중인 폼을 데이터베이스에 넣어둘 필요가 없습니다.

웹 스토리지에는 두 가지 종류가 있습니다.

  • localStorage: 브라우저 탭을 닫은 후에도 데이터가 유지됩니다. 쿠키와 달리 만료일이 없습니다.
  • sessionStorage: 세션이 끝날 때까지, 즉 브라우저가 닫힐 때까지 데이터가 유지됩니다.

이 글에서는 localStorage 객체에 집중하지만, 두 객체는 문법이 동일하기 때문에 필요에 따라 sessionStorage로 바꿔 사용할 수도 있습니다.

localStorage 사용 방법

본격적인 예제에 들어가기 전에, localStorage에서 제공하는 주요 메서드를 먼저 살펴보겠습니다.

setItem(): 데이터 저장하기

localStorage 항목을 생성하려면 setItem() 메서드를 사용합니다:

localStorage.setItem("name", "Linda Carlton");
console.log(localStorage);

실행 결과:

{ name: "Linda Carlton", length: 1 }

localStorage는 데이터를 키(key):값(value) 쌍으로 저장합니다. 위 예제에서는 "name"이라는 키를 만들고, 값으로 "Linda Carlton"을 지정했습니다.

console.log() 문으로 localStorage의 내용을 출력해 값이 제대로 추가되었는지 확인할 수 있습니다. 참고로 동일한 코드를 사용해 이미 저장된 값을 업데이트할 수도 있습니다.

getItem(): 데이터 가져오기

localStorage에서 특정 값을 조회하려면 getItem() 메서드를 사용합니다:

localStorage.getItem("name");

실행 결과:

Linda Carlton.

removeItem()과 clear(): 데이터 삭제하기

localStorage에서 데이터를 삭제하는 방법은 두 가지입니다:

  • removeItem(): localStorage에서 특정 항목 하나만 삭제
  • clear(): localStorage의 모든 항목 삭제

앞서 저장한 "name" 항목을 삭제하려면 다음 코드를 사용합니다:

localStorage.removeItem("name");
console.log(localStorage);

실행 결과:

{ length: 0 }

여기서 한 가지 눈여겨볼 점은, 모든 항목을 지운 후에도 length라는 속성이 남아 있다는 것입니다. 이 속성은 localStorage에 저장된 항목의 개수를 알려줍니다. "name" 항목을 삭제했으므로 현재 저장된 데이터는 없는 상태입니다.

또 한 가지 중요한 점은 localStorage에는 문자열(string)만 저장할 수 있다는 것입니다. 객체나 배열을 저장하려면 JSON.stringify()로 변환해야 하며, 꺼낼 때는 JSON.parse()를 사용하면 됩니다.

localStorage로 폼 저장 기능 만들기

긴 폼 작성을 요구하는 웹사이트를 이용해 본 적이 모두 있을 겁니다. 중요한 일이 아니라면 나중에 다시 돌아와서 작성을 이어가고 싶죠. 그래서 많은 사이트에 "폼 임시 저장" 기능이 있는 것입니다.

일부 사이트는 이런 데이터를 데이터베이스에 저장하지만, localStorage 메서드를 사용하면 훨씬 가벼운 버전을 직접 만들 수 있습니다.

1단계: 프론트엔드 만들기

동네 찻집 '더 리틀 티 하우스(The Little Tea House)'를 위한 고객 피드백 폼을 만들어 보겠습니다. 먼저 웹 애플리케이션의 프론트엔드를 구성합니다. index.html 파일을 만들고 아래 코드를 붙여넣으세요:

<!DOCTYPE html>
<html>
	<head>
    	<title>The Little Tea House Feedback</title>
    	<link rel="stylesheet" href="./styles.css" />
	</head>
	<body>
    	<div>
        	<h1>The Little Tea House: Customer Feedback</h1>
        	<p>How was your experience at The Little Tea House? We'd love to learn more!</p>
        	<form>
            	<label for="name">Name: </label>
            	<input id="name" type="text" /><br /><br />

            	<label for="email">Email: </label>
            	<input id="email" type="email" /><br /><br />

            	<label for="feedback">Message: </label><br /><br />
            	<textarea id="feedback"></textarea><br /><br />

            	<button id="saveButton">Save form</button>
            	<button id="retrieveButton">Retrieve form</button>
        	</form>
    	</div>
    	<script src="./form.js"></script>
	</body>
</html>

이 코드는 이름, 이메일, 메시지 입력 필드와 'Save form', 'Retrieve form' 버튼이 있는 기본적인 HTML 페이지를 생성합니다.

필요한 요소는 모두 갖춰졌지만, 좀 더 보기 좋게 몇 가지 스타일을 추가하겠습니다. styles.css 파일을 만들고 아래 코드를 붙여넣으세요:

div {
    margin-left: 15vw;
    margin-right: 15vw;
    background-color: lightblue;
    padding: 20px;
}

브라우저에서 페이지를 새로고침하면 폼이 화면 중앙에 위치하고 파란색 배경이 적용된 것을 확인할 수 있습니다. 이제 자바스크립트를 작성할 준비가 되었습니다.

2단계: 폼 저장 기능 구현하기

다음 단계는 폼 필드에 입력된 값을 가져오는 것입니다. 앞서 만든 폼 필드의 ID는 다음과 같습니다:

  • name — 이름(Name) 필드
  • email — 이메일(Email) 필드
  • feedback — 메시지(Message) 필드

이 ID들을 사용해 각 필드의 값을 가져올 수 있습니다. form.js 파일을 만들고 아래 코드를 붙여넣으세요:

var nameField = document.getElementById("name");
var emailField = document.getElementById("email");
var feedbackField = document.getElementById("feedback");

나중에 이 변수들의 값을 변경할 것이기 때문에 var로 선언했습니다. 버튼도 클릭 이벤트를 연결하기 위해 함께 가져옵니다:

var saveButton = document.getElementById("saveButton");
var retrieveButton = document.getElementById("retrieveButton");

이제 버튼이 눌렸을 때 폼 값을 localStorage에 저장하는 함수를 만들 차례입니다:

function saveResponses() {
	localStorage.setItem("name", nameField.value);
	localStorage.setItem("email", emailField.value);
   	localStorage.setItem("feedback", feedbackField.value);
}

이 코드는 saveResponses() 함수가 호출되기 전까지는 실행되지 않습니다. 그렇다면 어떻게 호출할 수 있을까요? 버튼에 이벤트 리스너를 연결하면 됩니다:

saveButton.addEventListener("click", saveResponses);

이제 'Save form' 버튼을 누르면 응답 내용이 localStorage에 저장됩니다.

하지만 저장만 하고 불러올 수 없다면 소용이 없겠죠. 'Retrieve form' 버튼을 클릭했을 때 데이터를 불러오는 함수도 작성하겠습니다:

function retrieveResponses() {
	nameField.value = localStorage.getItem("name");
   	emailField.value = localStorage.getItem("email");
    	feedbackField.value = localStorage.getItem("feedback");
}

retrieveButton.addEventListener("click", function(e) { e.preventDefault(); retrieveResponses(); });

이 코드는 localStorage에 값이 저장되어 있다면 각 폼 필드의 값을 해당 값으로 설정합니다. 이제 직접 실행해 보겠습니다.

폼에 값을 입력하고 'Save form' 버튼을 눌러 응답을 저장하세요. 그다음 페이지를 새로고침한 뒤 'Retrieve form' 버튼을 눌러보세요. 작성했던 내용이 그대로 복원되는 것을 확인할 수 있습니다!

localStorage에 저장된 정보는 탭을 닫아도 유지되며, 브라우저를 종료해도 삭제되지 않습니다. 저장된 폼 데이터는 다시 저장하거나 캐시를 지우기 전까지 계속 남아 있습니다.

주의: 이 기법으로 민감한 정보를 저장해서는 안 됩니다. localStorage의 모든 데이터는 평문(plain text)으로 저장되기 때문에, 접근 권한이 있는 사용자라면 누구나 내용을 읽을 수 있습니다.

마무리

localStorage 메서드를 사용하면 자바스크립트에서 데이터를 로컬에 저장할 수 있습니다. 할 일 목록(to-do list), 사용자 환경설정 저장, 폼 데이터 임시 저장(민감한 정보 제외) 같은 간단한 애플리케이션에서는 데이터베이스보다 훨씬 효율적인 선택입니다. localStorage는 설정이 간단하고 사용법도 쉬우며, 100% 순수 자바스크립트로 동작합니다.

이제 여러분도 전문 자바스크립트 개발자처럼 localStorage 메서드를 활용할 준비가 되었습니다!