Vanilla JS - 지역 저장소(Local Storage)

1. 지역 저장소(Local Storage)란?

- 브라우저를 운영하는데 필요한 정보를 사용자의 컴퓨터에 저장하는 것을 말한다.

- 다시 말해, 브라우저가 제공하는 일종의 DB이다. 이를 이용해 필요한 정보를 저장 및 사용할 수 있다.

- 모든 웹사이트에서 사용할 수 있으며, JS를 이용해 통제할 수 있다.

- 크롬의 개발자 도구를 사용하면 Application탭에서 쉽게 찾아볼 수 있다.

[예시화면]

- momentum extension에서 사용하는 local storage의 모습이다.

- 현재까지 ToDoList에 기록했던 모든 정보들이 들어 있다.

- 스크린샷에서 확인할 수 있듯이, key와 value 형식으로 정보가 저장된다.

2. 어떻게 사용하는가?

- 직접 예제를 만들어 보면서 Local Storage를 사용하는 방법을 익혀보자. 만들어 볼 예제는 다음과 같다.

- Local Storage에 저장되는 key값을 이용하여 해당 key가 갖고 있는 value를 출력하도록 할 것이다.

- 만약 key에 할당된 value가 없는 경우 아무것도 출력되지 않도록 한다.

[기본 HTML]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vanilla JS</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <div class="js-clock">
      <h1>00:00</h1>
    </div>
    <form class="js-form form">
      <input type="text" placeholder="What is your name?"/>
    </form>
    <h4 class="js-greetings greetings"></h4>
    <!-- Script 태그는 Body태그의 가장 마지막에 위치한다. -->
    <script src="index.js"></script>
    <script src="clock.js"></script>
    <script src="greeting.js"></script>
  </body>
</html>

[CSS코드]

body {
  background-color: rebeccapurple;
  color: white;
}

.form,
.greetings {
  display: none;
}

.showing {
  display: block;
}

[JS코드]

const form = document.querySelector(".js-form");
// 쿼리셀렉터는 첫번째로 검색된 엘리먼트를 가져온다.
const input = form.querySelector("input");
const greeting = document.querySelector(".js-greetings");

const USER_LS = "currentUser";
const SHOWING_CN = "showing";

function paintGreeting(text) {
    form.classList.remove(SHOWING_CN);
    greeting.classList.add(SHOWING_CN);
    greeting.innerHTML = `Hello ${text}`
}

function loadName() {
    const currentUser = localStorage.getItem(USER_LS);
    //USER_LS 변수에 담긴 값을 key로 하는 값을 지역저장소에서 찾아내는 함수
    if (currentUser === null) {
        // currentUser에 아무것도 값도 없는 경우 실행
    } else {
        paintGreeting(currentUser);
    }
}

function init() {
    loadName();
}

init();

[출력화면 - currentUser가 null인 경우]

- Local Storage에 key도 value도 없기 때문에 아무것도 출력되지 않는다.

[출력화면 - currentUser가 존재하는 경우]

- 잘 출력되는 것을 볼 수 있다.

저작자표시

'Front-end > Vanilla JS' 카테고리의 다른 글

Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(2) (0)	2020.10.16
Vanilla JS - 지역저장소를 이용해서 toDoList 만들기(1) (0)	2020.10.12
Vanilla JS - 시계 만들기 (0)	2020.10.10
Vanilla JS - 조건문(if~else) (0)	2020.10.08
Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) (0)	2020.10.07