JavaScript localStorage:가이드

웹 응용 프로그램은 매우 빠르게 매우 복잡해질 수 있습니다. 내가 개발자로 있을 때 배운 것 중 하나는 기회만 주어진다면 평범한 오래된 JavaScript로 할 수 있는 일이 많다는 것입니다.

localStorage API는 서버가 필요 없는 간단한 애플리케이션에 데이터베이스를 사용할 필요가 없도록 하는 강력한 내장 기능입니다. 이 API를 사용하여 애플리케이션에서 액세스할 수 있는 데이터 조각을 로컬에 저장할 수 있습니다.

이 가이드에서는 JavaScript에서 localStorage 메서드를 사용하는 방법에 대해 설명합니다. 나중에 웹 페이지에서 사용할 수 있도록 localStorage를 사용하여 양식의 내용을 저장하는 방법의 예를 살펴보겠습니다. 시작하겠습니다!

localStorage란 무엇입니까?

localStorage는 웹 스토리지 API의 일부입니다. 이 API를 사용하면 애플리케이션이 액세스할 수 있는 사용자 브라우저 내부에 데이터를 저장할 수 있습니다.

스토리지 API는 사용자 세션에 대한 모든 데이터를 데이터베이스로 보낼 필요가 없기 때문에 유용합니다. 사용자가 사이트에서 다크 모드를 활성화하면 클라이언트 측에서 이를 추적할 수 있습니다. 사용자가 나중을 위해 양식을 저장하는 경우 데이터베이스에 반쯤 완성된 양식을 저장할 필요가 없습니다.

웹 스토리지에는 두 가지 유형이 있습니다. localStorage는 사용자가 브라우저 탭을 닫은 후에도 사용자의 브라우저 창에 남아 있는 데이터입니다. localStorage 데이터는 쿠키와 달리 만료일이 없는 데이터입니다. sessionStorage는 세션이 만료될 때까지, 즉 브라우저가 닫힐 때까지 지속되는 데이터입니다.

이 포스트에서는 localStorage 객체에 초점을 맞출 것입니다. 그러나 둘 다 동일한 구문을 사용하기 때문에 sessionStorage를 대신할 수 있습니다.

localStorage 사용 방법

예제를 살펴보기 전에 localStorage에서 제공하는 메서드를 살펴보겠습니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

localStorage 항목을 생성하기 위해 setItem()이라는 메소드를 사용할 수 있습니다. :

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

코드 반환:

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

localStorage는 키:값 쌍으로 항목을 저장합니다. 이 예에서는 "이름"이라는 항목을 만들었습니다. 이 항목의 값은 "Linda Carlton"입니다.

console.log()를 사용했습니다. 값이 추가되었는지 확인하기 위해 localStorage의 내용을 인쇄하는 문.

이 동일한 코드를 사용하여 localStorage에 저장된 값을 업데이트할 수 있습니다.

localStorage에서 특정 값을 검색하려면 getItem()을 사용할 수 있습니다. 방법:

localStorage.getItem("name");

코드 반환:

Linda Carlton.

localStorage에서 데이터를 제거하는 데 사용할 수 있는 두 가지 방법이 있습니다.

removeItem():localStorage에서 단일 항목을 제거합니다.
clear():localStorage()의 모든 항목을 제거합니다.

로컬 저장소에서 "이름" 항목을 제거하려면 다음 코드를 사용할 수 있습니다.

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

코드 반환:

{ length: 0 }

localStorage를 지웠지만 여전히 하나의 항목인 length가 저장되어 있습니다. 이것은 localStorage에 얼마나 많은 항목이 저장되어 있는지 알려줍니다. 이제 "name" 항목을 제거했으므로 localStorage에 아무것도 저장되지 않습니다.

localStorage는 문자열만 저장할 수 있다는 점도 중요합니다.

localStorage를 사용하여 양식 저장 기능 구축

우리 모두는 긴 양식을 작성하도록 요청하는 일부 웹사이트에 있었습니다. 정말 중요한 것이 아니라면 나중에 그 형태로 돌아갈 수 있기를 원합니다. 이것이 바로 많은 사이트에 나중에 양식 세부정보를 추적하는 "양식 저장" 기능이 있는 이유입니다.

이들 중 일부는 데이터베이스의 데이터를 추적하지만 localStorage 메서드를 사용하여 경량 버전을 만들 수 있습니다.

프런트 엔드 만들기

우리는 지역 찻집인 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>

이 코드는 양식 필드가 있는 기본 HTML 페이지를 만듭니다.

우리 사이트는 이제 필요한 모든 것을 갖추고 있지만 미학적으로 더 즐겁게 만들기 위해 몇 가지 스타일을 추가할 것입니다. styles.css라는 파일을 만들고 다음 코드에 붙여넣습니다.

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

이제 웹 사이트로 돌아가서 페이지를 새로 고칩니다.

보시다시피 양식은 이제 웹 페이지 중앙에 나타나고 배경은 파란색입니다. 그것은 좋아 보인다! 이제 이 웹페이지에 대한 JavaScript 작성을 시작할 준비가 되었습니다.

양식 저장 기능 만들기

다음 단계는 양식 필드에 저장된 값을 수집하는 것입니다. 위에서부터 양식 필드의 ID는 다음과 같습니다.

이름(이름 필드)
이메일(이메일 필드)
피드백(메시지 필드)

이 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);

이제 "양식 저장" 버튼을 누르면 응답이 localStorage에 저장됩니다.

그러나 검색할 수 없다면 이 데이터를 저장해도 소용이 없습니다. "양식 검색" 버튼을 클릭하면 이 데이터를 검색하는 함수를 작성할 것입니다.

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에 저장된 값으로 설정합니다. 이제 코드를 실행하고 어떤 일이 일어나는지 살펴보겠습니다.

우리의 형태는 똑같아 보입니다. 일부 값을 양식에 삽입하고 "양식 저장" 버튼을 누르십시오. 그러면 양식에 대한 응답이 저장됩니다.

이제 페이지를 새로고침하고 "양식 검색"을 누르십시오. 양식 응답이 저장되었음을 알 수 있습니다! 탭을 닫아도 localStorage의 정보는 유지됩니다. 브라우저를 닫아도 삭제되지 않습니다. 우리는 해냈다!

이 양식 응답은 양식을 다시 저장하거나 캐시를 지울 때까지 저장됩니다.

참고:이 기술을 사용하여 민감한 정보를 저장해서는 안 됩니다. localStorage의 모든 데이터는 일반 텍스트로 저장되므로 이를 읽는 모든 사용자가 액세스할 수 있습니다.

결론

localStorage 메소드를 사용하면 JavaScript에서 로컬로 데이터를 저장할 수 있습니다. 할 일 목록, 사용자 기본 설정 저장 또는 사용자 양식 데이터(민감한 데이터 제외) 저장과 같은 간단한 응용 프로그램의 경우 데이터베이스를 사용하는 것보다 훨씬 낫습니다. localStorage는 설정하기 쉽고 사용하기 쉬우며 100% 바닐라 JavaScript입니다.

이제 전문 JavaScript 개발자처럼 localStorage 메서드를 사용할 준비가 되었습니다!