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

하수도키

·

2020. 7. 17. 10:37

728x90
반응형
SMALL

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

서론

  • 일반 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을 막는다. 여기선 필요 없으니 사용한다.
  • 대신에, forminput의 값을 전달한다. 그리고 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값이 itemslocalStorage를 만든다. 지금 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