JavaScript에서 Local Storage를 사용하는 방법

하수도키

2020. 7. 17. 10:37

728x90

SMALL

`JavaScript`에서 `Local Storage`를 사용하는 방법

원글(https://tania.dev/how-to-use-local-storage-with-javascript)을 번역/의역했습니다.

서론

일반 JavaScript를 사용하여 간단하고 새로운 탭 페이지 응용 프로그램을 만들어 브라우저의 내장 웹 스토리지를 사용하는 방법에 대해 알아보자.
저는 작은 응용 프로그램을 처음부터 순수한 JavaScript로 완전히 구축하는 튜토리얼을 만드는 것을 좋아한다.
todolist은 일반적인 앱 아이디어이지만, 할 일을 저장할 데이터베이스가 없으면 그다지 유용하지 않으며, 이는 초보자 영역을 넘어서는 복잡성을 가중시킨다. 이것은 실제로 빠른 메모를 하는데 유용할 수 있다.
브라우저에서 앱을 새 탭페이지로 설정하면 캐시를 삭제하지 않는 한 프로그램이 로컬 컴퓨터에서 유지된다.
이것이 오늘 우리가 배울 것입니다.
이 기술을 습득하기 위한 전제 조건
- HTML,CSS, JavaScript기초
- DOM 기초
- API 통신하는 방법

목표
- 브라우저의 로컬 저장소에 작업 항목을 로컬로 저장하고 프런트 엔드에 표시하는 새 탭 페이지응용 프로그램을 만듭니다. 완성 예제를 봅시다.(링크)

웹 스토리지 개요

웹 스토리지는 사용자의 브라우저에 저장되는 데이터이다.
- 로컬 스토리지 – 브라우저 창이 닫힌 후에도 유지되는 만료 날짜가 없는 데이터이다.
- 세션 스토리지 – 브라우저 창이 닫힌 후 지워지는 데이터이다.

이 기능은 사용자 기본 설정(웹 사이트의 밝은 색 또는 어두운 색 테마), 장바구니 담기 또는 웹 사이트에 로그인한 사용자 기억과 같은 데이터를 저장할 때 유용하다.
이전에는 이러한 유형의 임시 데이터를 기억하기 위한 유일한 선택이 쿠키다.
로컬 저장소의 저장 공간이 상당히 크며(로컬5MB vs 쿠키4KB), 모든 HTTP요청과 함께 전송되지 않으므로 클라이언트 측 저장소에 대한 더 나은 선택이 될 수 있다.(쿠키는 HTTP요청과 함께 전송)
다음은 localStorage메서드에 대한 개요이다.

Method	Description
`setItem()`	로컬 스토리지에 키, 값을 추가한다.
`getItem()`	키에 맞는 값을 찾는다.
`removeItem()`	키에 맞는 값을 삭제한다.
`clear()`	로컬 스토리지에 저장된 모든 내용을 삭제한다.

JavaScript콘솔로 이동하여 입력하면 로컬 저장소에 무엇이 있는지 테스트할 수 있다..
눈으로 읽지만 말고 따라하세요.

localStorage
// Storage {length: 0}

setItem()메서드를 사용하는 것처럼 일부 데이터를 localStorage에 추가하는 것이 쉽습니다.
일반 키와 값을 사용하여 이름을 지정할 수는 있지만 아무 문자열이나 될 수 있습니다.
이제 콘솔에서 localStorage를 다시 테스트하면 새 키와 값을 찾을 수 있습니다.

localStorage.setItem('key', 'value');
localStorage
// Storage {key: "value", length: 1}

특정 키의 값을 가져오려면 getItem()메서드를 사용한다.

localStorage.getItem('key');
// "value"

마지막으로 데이터를 삭제하려면 removeItem()메서드를 사용한다.

localStorage.removeItem('key');

localStorage에 모든 내용을 삭제하려면 clear()메서드를 사용한다.

localStorage.clear();

이제 어플리케이션을 설정해보자.

프론트엔드(HTML 화면단) 작업

첫번째, 간단한 HTML(index.html)을 만든다.
빠른 화면 작업이 필요할때 항상 사용하는Primitive(미니멀리스트 CSS 프레임워크)를 불러온다.

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>New Tab App</title>

  <link rel="stylesheet" href="<https://taniarascia.github.io/primitive/css/main.min.css>">
</head>

<body>

  <div class="small-container">
    <h1>New Tab App</h1>

    <form>
        <input id="item" type="text" placeholder="New" required>
      </form>

      <h2>Items</h2>
      <ul></ul>

      <button>Clear All</button>

  </div>

  <script src="js/scripts.js"></script>
</body>

</html><!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>New Tab App</title>

  <link rel="stylesheet" href="<https://taniarascia.github.io/primitive/css/main.min.css>">
</head>

<body>

  <div class="small-container">
    <h1>New Tab App</h1>
    <<!-- more will go here -->
  </div>

  <script src="js/scripts.js"></script>
</body>

</html>

아래와 같이 3가지를 만들것이다.
- A text input - 새로운 아이템 추가하기.
- A list - 아이템들이 추가되어 보여질 곳
- A button - 모든 아이템 삭제하기

아래 코드를 "more will go here" 주석에 추가해라.

<form>
  <input id="item" type="text" placeholder="New" required>
</form>

<h2>Items</h2>
<ul></ul>

<button>Clear All</button>

여기까지가 프론트엔드(화면 그리기)다. 이젠 자바스크립트를 이용해 기능 추가를 집중할 것이다.

" 여기 HTML은 설명을 목적으로 단순화되었으며 접근성 관련하여 설명하지 않습니다."

자바스크립트 기능 설정

localStorage에 통합하기 전에, form, list를 가져오자(input에서 입력하고 제출하면 ul에 표시되는 것)
첫번째, element 변수 선언하기(form, ul, button, text input)

const form = document.querySelector('form');
const ul = document.querySelector('ul');
const button = document.querySelector('button');
const input = document.getElementById('item');

다음 할일은 li엘리먼트를 만드는 함수를 생성한다, 함수 생성하는 이유는 1번 이상 사용하기 때문이다. 즉 재사용때문이다.
liMaker()함수를 호출할 것이다. 이 함수는 li엘리먼트를 만들고 매개변수로 받은 값을 li엘리먼트의 텍스트 값으로 넣을 것이다. 그리고 아이템 목록인 ul에 추가할것이다.

const liMaker =  (text)  =>  {
  const li = document.createElement('li');
  li.textContent = text; 
  ul.appendChild(li);  
}

submit event(form에서 enter 누를때 실행)를 기다리는 form 태그에 event listener를 추가할 것이다. e.preventDefault()는 데이터를 서버로 보내는 form의 기본 submit action을 막는다. 여기선 필요 없으니 사용한다.
대신에, form은 input의 값을 전달한다. 그리고 liMaker(input.value)함수를 호출해 input.value의 값이 들어간 아이템을 만들고 DOM에 추가한다.
마지막으로, input 입력창을 공백으로 처리한다.

form.addEventListener('submit',  function  (e)  {
 e.preventDefault();
 liMaker(input.value); 
 input.value =  "";  
});

현재, 몇줄 안되는 코드로 리스트에 아이템을 추가하는 앱을 만들었다.

아이템 목록을 어디에서도 저장하지 않으므로, 새로고침하거나 닫으면 아이템 목록들이 사라진다.
마지막 단계는 데이터를 유지하기 위해 아이템 목록을 localStorage 에 저장해보자.

`localStorage` 사용하기

앱에 몇개의 기능을 추가할 것이다.
- 첫번째, form이 제출할때마다, input 값이 화면에 보이는것뿐 아니라 localStorage에 추가해야 한다. 또한 localStorage에 존재하고 있는 아이템들도 반복되어 아이템 리스트 첫번째에 표시되기를 원한다.
- 마지막으로, Clear All 버튼을 클릭하면 화면뿐만 아니라 localstorage의 모든 아이템들이 삭제되길 원한다.

시작할 빈 배열을 만들고 key값이 items인 localStorage를 만든다. 지금 localStorage는 오직 문자열을 값으로만 지원하며, 배열에 todos(할일,item)을 저장한다.)
JSON.stringify()를 사용해 배열(데이터)를 문자열로 바꿔 이 문제(문자열을 값으로만 지원)를 해결 할 수 있다. JSON.parse()는 localStorage의 내용을 데이터 변수로 작업할 수 있게 변경한다.(문자열->배열)

아래 코드를 우리가 앞에서 설정한 상수 선언 아래에 넣어라.

// other constant declarations here  
...  
let itemsArray =  []; localStorage.setItem('items', JSON.stringify(itemsArray));  
const data = JSON.parse(localStorage.getItem('items'));

form 이벤트 리스너에서 새로운 input value값을 배열에 넣자. 그리고 localStorage에도 새롭고, 업데이트된 새 값을 설정하자.

// form event listener here  
... 
e.preventDefault();

itemsArray.push(input.value);
localStorage.setItem('items', JSON.stringify(itemsArray));

자바스크립트가 이해할수 있고 작동할 수 있는 형태의 존재하는 모든 localStorage 데이터를 포함하는 data 변수에 있는 모든것들을 반복 할것이다. 그리고 liMaker()를 다시 실행된다.
앱을 열때마다 화면에 현재 저장되어있는 정보들이 표시된다.

data.forEach(item => {
  liMaker(item);
});

마지막으로, ul에 있는 모든 자식들을 삭제할뿐만 아니라 localStorage에 있는 모든 데이터 삭제하는 클릭 이벤트를 button에 추가한다.

button.addEventListener('click', function ()  { 
  localStorage.clear();  
  while  (ul.firstChild)  { 
    ul.removeChild(ul.firstChild);  }  
  });

잘 작성했으면, 모든것들이 화면에 나타날뿐 아니라 localStorage에 저장 된다. console에서 localStorage 테스트를 살펴볼수 있다.

Storage {items: 
"["Welcome","to","the","Thunderdome"]",
 length: 1}

마지막 문제는, 브라우저를 닫거나, 새로고침 하면 localStorage의 모든 기존 정보가 없어지고 화면에도 아무것도 남지 않는다. 왜일까?
itemArray는 스크립트가 실행될때마다 빈 배열로 리셋된다.
아래 예제와 같이 localStorage가 있는지 조건문을 사용해 고칠수 있다.

let items;  

if  (localStorage.getItem('items'))  { 
  items = JSON.parse(localStorage.getItem('items'));  
} else { 
  items =  [];  
}

위에 코드는 복잡하니 더 간결하려면 삼항 연산자를 이용하면 된다.

let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

그러면, 우리의 앱이 완성되었다. 이제 할일을 입력하고 새로고침하거나 브라우저 창을 닫아도 개발자도구에서 수동으로 지우거나 또는 localStorage.clear() 명렁어를 실행시킬때까지 데이터가 지속된다. 아래는 자바스크립트 전체 코드이다.

const form = document.querySelector('form');
const ul = document.querySelector('ul');
const button = document.querySelector('button');
const input = document.getElementById('item');
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : [];

localStorage.setItem('items', JSON.stringify(itemsArray));
const data = JSON.parse(localStorage.getItem('items'));

const liMaker = (text) => {
  const li = document.createElement('li');
  li.textContent = text;
  ul.appendChild(li);
}

form.addEventListener('submit', function (e) {
  e.preventDefault();

  itemsArray.push(input.value);
  localStorage.setItem('items', JSON.stringify(itemsArray));
  liMaker(input.value);
  input.value = "";
});

data.forEach(item => {
  liMaker(item);
});

button.addEventListener('click', function () {
  localStorage.clear();
  while (ul.firstChild) {
    ul.removeChild(ul.firstChild);
  }
});

결론

이 튜토리얼에서 우리는 HTML5 web storage를 사용해 잠재적으빠르고 간단한 메모를 새 탭 페이지에 유지할 수 있는 to-do를 기반으로 만든 간단한 앱을 어떻게 만드는지 배웠다. localStorage에 더 많은 이해와 이것을 간단한 앱에 통합시키는 방법을 알기 바란다.
이 글이 도움이 되었다면 다음 사람들도 도움을 될것이므로 이 글을 공유해주세요.

728x90

LIST

저작자표시

'개발일기 > Web' 카테고리의 다른 글

CDN(Contents Delivery Network) 개념 살펴보기(웹 최적화) (1)	2020.10.21
로컬에서 서브 도메인 활용하기(local sub domain) (3)	2020.08.28

하수도키의 성장일기

JavaScript에서 Local Storage를 사용하는 방법

`JavaScript`에서 `Local Storage`를 사용하는 방법

서론

웹 스토리지 개요

프론트엔드(HTML 화면단) 작업

자바스크립트 기능 설정

`localStorage` 사용하기

결론

'개발일기 > Web' 카테고리의 다른 글

티스토리툴바

JavaScript에서 Local Storage를 사용하는 방법

서론

웹 스토리지 개요

프론트엔드(HTML 화면단) 작업

자바스크립트 기능 설정

localStorage 사용하기

결론

'개발일기 > Web' 카테고리의 다른 글

개발일기/Web 카테고리와 연관된 콘텐츠

티스토리툴바

`JavaScript`에서 `Local Storage`를 사용하는 방법

`localStorage` 사용하기