본문 바로가기
강의 실습/웹 프론트엔드를 위한 자바스크립트 첫 걸음

localStorage로 데이터 저장

by Jint 2023. 11. 5.

1. local storage
local storage는 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 이 로컬 스토리지를 사용하면, 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있다. 로컬 스토리지는 보통 사용자의 로그인 정보나 설정 등을 저장하기 위해 사용된다.
예를들어, 사용자가 웹 페이지에서 로그인 정보를 입력해 로그인을 성공했다면, 해당 아이디를 로컬 스토리지에 저장해, 사용자가 다음에 다시 동일한 페이지에 방문했을 때, 아이디 정보를 불러와서 이전에 입력했던 정보를 유지할 수 있다.

vscode에 들어가서 탐색기를 통해 localstorage-test 라는 폴더를 만들고 선택한 뒤, index.html 파일에 간단하게 로그인과 비밀번호를 입력할 수 있는 input 태그와 로그인 버튼을 만들어본다.

- index.html

<!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>


index.js 파일에서는 이 input 태그에 입력된 아이디와 비밀번호의 값을 getElementById를 통해 요소들을 가져오고, 로그인 버튼을 누르면 아이디와 비밀번호의 값을 가져오는 코드를 작성한다.

- index.js

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


로그인 버튼을 누르면, 입력한 값이 콘솔탭에 알맞게 출력되는 것을 볼 수 있다.
이번에는 로그인 버튼을 누르면, "로그인 성공" 이라는 alert를 띄우고, 이 로그인 정보를 로컬스토리지에 저장해보도록 한다. 로컬 스토리지는 localStorage 객체를 사용해 데이터를 저장할 수 있다. 이 객체는 key-value 쌍으로 데이터를 저장할 수 있고, 로컬 스토리지에 값을 저장하려면 setItem() 메서드를 사용해야 한다. setItem 메서드는 두 개의 매개변수를 갖는데, 첫 번째 매개변수는 key 값인 저장될 값의 이름, 그리고 두 번째 매개변수는 value값인 실제로 저장 될 값이다.

- index.js

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

    // localStorage.setItem(key, value);
    localStorage.setItem("id", idElement.value);
    localStorage.setItem("pwd", pwdElement.value);
})


로그인 버튼을 누르면, 이 로그인 정보가 로컬스토리지 라는 곳에 저장되어야 하는데, 이 콘솔탭에서는 아무런 정보도 보이지 않는다. 로컬 스토리지는 콘솔 탭이 아닌 "애플리케이션" 탭으로 이동해서 확인할 수 있다. 애플리케이션 탭으로 이동해서 왼쪽의 로컬 스토리지를 눌러보면 id, pwd라는 이름으로 알맞은 값이 저장되어있는 것을 볼 수 있다.

로컬 스토리지에 값을 저장하면 브라우저를 종료하더라도 계속 유지가 된다고 했는데 실제로 저장된 데이터가 유지되는지 확인해본다. 창을 종료한 다음, vscode의 Port:5500을 눌러 로컬서버 종료 후 다시 go live를 눌러서 창을 키고 로컬 스토리지에 값을 확인해보면 값이 그대로 유지되어 있는 것을 볼 수 있다.

id와 pwd 값을 이렇게 하나씩 다른 이름으로 로컬스토리지에 저장했지만, 보통 로컬스토리지를 이용해 데이터를 저장할 때에는 객체 형태 혹은 배열의 형태로 여러 값들을 하나의 key로 저장한다. 이 id값과 pwd 값은 사용자의 정보이기 때문에 userInfo라는 이름으로 묶어서 두 개의 값을 하나의 객체 형태로 저장해본다.

- index.js

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

    // localStorage.setItem(key, value);
    // localStorage.setItem("id", idElement.value);
    // localStorage.setItem("pwd", pwdElement.value);

    let userInfo = {id: idElement.value, pwd: pwdElement.value}
    localStorage.setItem("userInfo", userInfo);
})


코드를 실행해보면, 이번에는 로컬 스토리지에 키값은 userInfo, 값은 [object Object]로 설정되었다. 이렇게 저장되면 값을 애플리케이션 탭에서 확인할 수 없는데, 로컬스토리지에 객체를 넣을 때 JSON 이라는 자바스크립트 객체 표기법으로 객체를 JSON 문자열로 변환한 다음 저장해야 한다.

- index.js

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

    // localStorage.setItem(key, value);
    // localStorage.setItem("id", idElement.value);
    // localStorage.setItem("pwd", pwdElement.value);

    let userInfo = {id: idElement.value, pwd: pwdElement.value}
    // localStorage.setItem("userInfo", userInfo);
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
})


로컬스토리지에 setItem으로 객체를 넣어줄 때, 이렇게 JSON.stringify를 사용해 객체를 JSON 문자열로 넣어주면, 아이디와 비밀번호 값이 애플리케이션 탭에 userInfo라는 키의 값으로 알맞게 할당된 것을 볼 수 있다.

이제 한 번 로그인에 성공했던 아이디와 비밀번호의 값을, 다음에 동일한 사이트에 재 접속 했을 때 사용할 수 있게, 입력폼의 아래쪽에 띄워주도록 한다. id 값이 userId인 div와 id 값이 userPwd인 div 두 개를 추가로 작성해준다.

- index.html

<!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 id="userId"></div>
            <div id="userPwd"></div>
        </div>
        <script src="./index.js"></script>
    </body>

</html>


index.js 파일에서는 id 값이 userId인 div 요소를 getElementById를 사용해 userIdElement 변수에 넣어주고, id 값이 userPwd인 div 요소도 마찬가지로 userPwdElement에 할당해주도록 한다. 그 다음, userInfo 변수에 localStorage 객체에 있는 값을 꺼내온 다음 할당해준다. localStorage에 저장되어 있는 값을 가져올 때에는 getItem 메서드를 사용하고, 로컬 스토리지에 있는 데이터의 key값으로 값을 꺼내올 수 있다. 그 다음, userIdElement에 textContent를 사용해 사용자의 로그인 정보가 담긴 객체인 userLoginInfo의 id값을 텍스트로 추가하고, userPwdElement에는 userInfo의 pwd 값을 텍스트로 추가한다.

- index.js

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"); // getItem() : 로컬 스토리지에 저장된 데이터의 키값으로 원하는 데이터 꺼낼 수 있다.
console.log(userLoginInfo);

userIdElement.textContent = `id : ${userLoginInfo.id}`;
userPwdElement.textContent = `pwd : ${userLoginInfo.pwd}`;

loginButton.addEventListener("click", () => {
    // console.log(idElement.value);
    // console.log(pwdElement.value);

    // localStorage.setItem(key, value);
    // localStorage.setItem("id", idElement.value);
    // localStorage.setItem("pwd", pwdElement.value);

    let userInfo = {id: idElement.value, pwd: pwdElement.value}
    // localStorage.setItem("userInfo", userInfo);
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
})


이렇게 작성한 코드를 실행하면, 콘솔에는 우리가 알고있는 객체의 형태가 아니라 문자열이 출력되었고, 웹 페이지에는 로컬스토리지에 저장한 id와 pwd 값이 아니라, 두 값 모두 undefined라고 나와있는 것을 볼 수 있다. id와 pwd 값이 undefined로 나오는 이유는 로컬스토리지에 setItem을 사용해 id와 pwd 값을 객체의 형태로 저장할 때 이 객체를 JSON 문자열로 변환해주었기 때문이다. 로컬스토리지에 저장된 값을 꺼내올 때에는, 다시 이 JSON 데이터를 객체 형태로 변환하는 과정이 필요하다. 로컬스토리지에 저장된 JSON 문자열은 JSON.parse()를 사용해 localStorage.getItem("userInfo") 의 값을 객체로 변환할 수 있다.

- index.js

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"); // getItem() : 로컬 스토리지에 저장된 데이터의 키값으로 원하는 데이터 꺼낼 수 있다.
const userLoginInfo = JSON.parse(localStorage.getItem("userInfo"));
console.log(userLoginInfo);

userIdElement.textContent = `id : ${userLoginInfo.id}`;
userPwdElement.textContent = `pwd : ${userLoginInfo.pwd}`;

loginButton.addEventListener("click", () => {
    // console.log(idElement.value);
    // console.log(pwdElement.value);

    // localStorage.setItem(key, value);
    // localStorage.setItem("id", idElement.value);
    // localStorage.setItem("pwd", pwdElement.value);

    let userInfo = {id: idElement.value, pwd: pwdElement.value}
    // localStorage.setItem("userInfo", userInfo);
    localStorage.setItem("userInfo", JSON.stringify(userInfo));
})


로컬스토리지에서 getItem을 사용해 꺼내온 값을 JSON.parse을 사용해 객체형태로 변환한 후 알맞은 값을 textContent로 넣어주면, 입력폼의 아래 요소에 id값과 pwd값이 알맞게 출력되는 것을 볼 수 있다.

정리해보면, 로컬스토리지는 웹 브라우저에서 사용 가능한 저장소로 사용자가 브라우저를 닫아도 저장한 데이터를 계속해서 유지할 수 있게 해주는 저장소이고, 로컬스토리지에 값을 저장할 때에는 setItem을 사용하며, 만약 객체 혹은 배열 형태의 데이터를 저장한다면, 항상 JSON.stringify를 사용해 저장할 데이터를 JSON 문자열로 변경해주어야하고, 로컬스토리지에 저장된 값을 꺼내서 사용할 때에는 getItem을 사용하고, 마찬가지로 저장된 데이터가 배열 혹은 객체의 형태라면 JSON.parse를 사용해 저장된 데이터를 다시 객체나 배열의 형태로 변환한 후에 사용해야 한다.


참고강의 : https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%B2%AB%EA%B1%B8%EC%9D%8C

 

웹 프론트엔드를 위한 자바스크립트 첫 걸음 - 인프런 | 강의

웹 프론트엔드 개발자를 희망한다면? 친절하고 꼼꼼한 자바스크립트 강의로 첫걸음을 내딛어보세요✨, 쉽고 자세하게 배우는 자바스크립트🤓나만의 크롬 개발화면까지 뚝딱! 학생 50% 할인 쿠

www.inflearn.com

'강의 실습 > 웹 프론트엔드를 위한 자바스크립트 첫 걸음' 카테고리의 다른 글

요소를 배치하는 방법-position  (1) 2023.11.07
프로젝트 미리보기 및 코드 주소  (0) 2023.11.06
입력 폼 활용하기  (6) 2023.11.04
VSCode 설치 및 설정  (0) 2023.11.03
Date 객체와 날짜  (0) 2023.11.02

관련글

댓글

티스토리툴바