localStorage
local storage는 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 이 로컬스토리지를 사용하면, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있습니다.
이 로컬 스토리지는 보통 사용자의 로그인 정보나 설정 등을 저장하기 위해 사용됩니다.
예를들어, 사용자가 웹 페이지에서 로그인 정보를 입력해 로그인을 성공했다면, 해당 아이디를 로컬스토리지에 저장해, 사용자가 다음에 다시 동일한 페이지에 방문했을 때, 아이디 정보를 불러와서 이전에 입력했던 정보를 유지할 수 있습니다.
로그인과 비밀번호를 입력할 수 있는 input태그와 로그인버튼을 만들어보겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>storage-test</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="main">
<input id="id" type="text"/>
<input id="pwd" type="password"/>
<button id="login-btn">로그인</button>
</div>
<script src="./index.js"></script>
</body>
</html>그다음 js파일에서 input태그에 입력된 아이디와 비밀번호의 값을 가져와보겠습니다.
const idElement = document.getElementById("id");
const pwdElement = document.getElementById("pwd");
const loginButton = document.getElementById("login-btn");
loginButton.addEventListener("click",()=>{
console.log(idElement.value);
console.log(pwdElement.value);
})아이디에 123456, 비밀번호에 123을 입력했을 때의 결과입니다.
이번에는 로그인버튼을 누르면 "로그인 성공" 이라는 alert를 띄우고, 이 로그인 정보를 로컬스토리지에 저장해보겠습니다.
로컬스토리지는 localStorage 객체를 사용해 데이터를 저장할 수 있습니다.
이 객체는 key-value 쌍으로 데이터를 저장할 수 있고, 로컬스토리지에 값을 저장하려면 setItem()메서드를 사용합니다.
const idElement = document.getElementById("id");
const pwdElement = document.getElementById("pwd");
const loginButton = document.getElementById("login-btn");
loginButton.addEventListener("click",()=>{
localStorage.setItem();
})setItem 메서드2개의 매개변수를 갖습니다.
첫번째 매개변수는 key값인 저장될 값의 이름,
두번째 매개변수는 value값인 실제로 저장 될 값입니다.
const idElement = document.getElementById("id");
const pwdElement = document.getElementById("pwd");
const loginButton = document.getElementById("login-btn");
loginButton.addEventListener("click", ()=>{
localStorage.setItem("id", idElement);
localStorage.setItem("pwd", pwdElement);
});
콘솔탭에서 애플리케이션 탭으로 이동하고 왼쪽의 로컬스토리지를 눌러보면 이렇게 우리가 저장한 id, pwd라는 이름으로 알맞은 값이 저장되어있는 것을 볼 수 있습니다.
로컬 스토리지에 값을 저장하면, 이 브라우저를 종료하더라도 계속 유지가 된다고 했는데
실제로 그런지 확인해보겠습니다. 창을 종료한다음 다시 들어가보겠습니다.
그대로 유지가 됩니다.
보통 로컬스토리지를 이용해 데이터를 저장할 때에는 객체 형태 혹은 배열의 형태로 여러 값들을 하나의 key로 저장합니다. id와 pwd를 userInfo라는 이름으로 묶어서 두개의 값을 하나의 객체 형태로 저장하겠습니다.
const idElement = document.getElementById("id");
const pwdElement = document.getElementById("pwd");
const loginButton = document.getElementById("login-btn");
loginButton.addEventListener("click",()=>{
let userInfo = { id: idElement.value, pwd: pwdElement.value }
localStorage.setItem("userInfo", userInfo);
})로컬 스토리지에 키값은 unserInfo, 값은 [object Object]로 설정되었습니다.
로컬스토리지에 객체를 넣을때에는 JSON이라는 자바스크립트 객체 표기법으로 객체를 JSON 문자열로 변환한 다음 저장해야합니다.
JSON.stringify를 사용해 객체를 JSON 문자열로 넣어주면,
const idElement = document.getElementById("id");
const pwdElement = document.getElementById("pwd");
const loginButton = document.getElementById("login-btn");
loginButton.addEventListener("click",()=>{
let userInfo = { id: idElement.value, pwd: pwdElement.value }
localStorage.setItem("userInfo", JSON.stringify(userInfo));
})아이디와 비밀번호 값이 키의 값으로 할당됩니다.
해당 각각의 값을 입력폼의 아래쪽에 띄워주겠습니다.
<!DOCTYPE html>
<html>
<head>
<title>form-test</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="main">
<input id="id" type="text"/>
<input id="pwd" type="password"/>
<button id="login-btn">로그인</button>
<div id="userId"></div>
<div id="userPwd"></div>
</div>
<script src="./index.js"></script>
</body>
</html>
id값이 userId인 div요소를 getElementById를 사용해 userIdElement 변수에 넣고
id값이 userPwd인 div요소도 마찬가지로 userPwdElement에 할당해주겠습니다.
userInfo 변수에 localStorage객체에 있는 값을 꺼내온 다음 할당해주겠습니다. localStorage에 저장되어 있는 값을 가져올 때에는 getItem 메서드를 사용, key값으로 꺼내올 수 있습니다.
userIdElement에 textContent를 사용해 사용자의 로그인 정보가 담긴 객체인 usreLoginInfo의 id값을 텍스트로 추가하고, userPwdElement에는 userInfo의 pwd값을 텍스트로 추가해주었습니다.
const idElement = document.getElementById("id");
const pwdElement = document.getElementById("pwd");
const loginButton = document.getElementById("login-btn");
const userIdElement = document.getElementById("userId");
const userPwdElement = document.getElementById("userPwd");
const userLoginInfo = localStorage.getItem("userInfo");
console.log(userLoginInfo);
userIdElement.textContent = `id : ${userLoginInfo.id}`;
userPwdElement.textContent = `pwd : ${userLoginInfo.pwd}`;
loginButton.addEventListener("click",()=>{
let userInfo = { id: idElement.value, pwd: pwdElement.value }
localStorage.setItem("userInfo", JSON.stringify(userInfo));
})
콘솔에는 객체의 형태가 아닌 문자열이 출력되었고, 웹에는 undefined라고 나와있습니다.
id와 pwd값이 undefined로 나오는 이유는, 우리가 로컬스토리지에 setItem을 사용해 id와 pwd값을 객체의 형태로 저장할 때, 이 객체를 JSON 문자열로 변환해주었기 때문입니다.
다시 JSON데이터를 객체형태로 변환하는 과정이 필요합니다.
JSON문자열은 JSON.pares()를 사용해 값을 객체로 변환할 수 있습니다.
const userLoginInfo = JSON.parse(localStorage.getItem("userInfo"));
정리
- 로컬스토리지는 웹 브라우저에서 사용 가능한 저장소로, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있게 해주는 저장소이다
- 로컬스토리지에 값을 저장할때에는 setItem을 사용하며, 만약 객체 혹은 배열 형태의 데이터를 저장한다면, 항상 JSON.stringify를 사용해 저장할 데이터를 JSON 문자열로 변경해주어야한다
- 로컬스토리지에 저장된 값을 꺼내서 사용할 때에는 getItem을 사용하고, 마찬가지로 저장된 데이터가 배열 혹은 객체의 형태라면 JSON.parse를 사용해 저장된 데이터를 다시 객체나 배열의 형태로 변환한 후에 사용해야한다.
참고자료
웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의
웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, - 강의 소개 | 인프런
www.inflearn.com
'프론트엔드 > javascript' 카테고리의 다른 글
| javascript - 2. 시계만들기 (0) | 2023.06.10 |
|---|---|
| javascript - 1.크롬시작화면만들기 (0) | 2023.06.10 |
| javascript - 입력 폼 활용하기 (0) | 2023.06.05 |
| javascript - Date 객체와 날짜 (0) | 2023.06.05 |
| javascript - DOM API -2 (0) | 2023.06.04 |
