본문 바로가기
개발/JavaScript 30

15. LocalStorage

Sangminnn 2017. 4. 22. 15:32
반응형


기본 코드

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>LocalStorage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M495.9,425.3H16.1c-5.2,0-10.1,2.9-12.5,7.6c-2.4,4.7-2.1,10.3,0.9,14.6l39,56.4c2.6,3.8,7,6.1,11.6,6.1h401.7   c4.6,0,9-2.3,11.6-6.1l39-56.4c3-4.3,3.3-9.9,0.9-14.6C506,428.2,501.1,425.3,495.9,425.3z M449.4,481.8H62.6L43,453.6H469   L449.4,481.8z"/><path d="M158.3,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1c-7.8,0-14.1,6.3-14.1,14.1v64.5   C144.2,115.7,150.5,122,158.3,122z"/><path d="M245.1,94.7c7.8,0,14.1-6.3,14.1-14.1V16.1c0-7.8-6.3-14.1-14.1-14.1C237.3,2,231,8.3,231,16.1v64.5   C231,88.4,237.3,94.7,245.1,94.7z"/><path d="M331.9,122c7.8,0,14.1-6.3,14.1-14.1V43.4c0-7.8-6.3-14.1-14.1-14.1s-14.1,6.3-14.1,14.1v64.5   C317.8,115.7,324.1,122,331.9,122z"/><path d="M9.6,385.2c5.3,2.8,11.8,1.9,16.2-2.2l50.6-47.7c56.7,46.5,126.6,71.9,198.3,71.9c0,0,0,0,0,0   c87.5,0,169.7-36.6,231.4-103.2c5-5.4,5-13.8,0-19.2c-61.8-66.5-144-103.2-231.4-103.2c-72,0-142.2,25.6-199,72.5l-50-47.1   c-4.4-4.1-10.9-5-16.2-2.2c-5.3,2.8-8.3,8.7-7.4,14.6l11.6,75L2.2,370.6C1.3,376.5,4.2,382.4,9.6,385.2z M380.9,230.8   c34.9,14.3,67.2,35.7,95.3,63.6c-10.1,10-20.8,19.2-31.9,27.5c-22.4-3.3-29.6-8.8-30.7-9.7c-4-5.7-11.8-7.7-18.1-4.4   c-6.9,3.6-9.5,12.2-5.9,19.1c1.9,3.5,7.3,10.3,22.4,16c-10.1,5.7-20.5,10.7-31.1,15.1C352.4,320.2,352.4,268.6,380.9,230.8z    M36.3,255.6l29.4,27.7c5.3,5,13.6,5.1,19.1,0.3c53.2-47.6,120.7-73.7,190-73.7c26.9,0,53.2,3.9,78.5,11.3   c-29.3,44.6-29.3,102,0,146.6c-25.3,7.4-51.6,11.3-78.5,11.3c-69,0-136.3-26-189.4-73.2c-2.7-2.4-13.4-6.3-19.1,0.3l-30.1,28.3   l5.7-40C42.2,293,36.3,255.6,36.3,255.6z"/><circle cx="398.8" cy="273.8" r="14.1"/></g></svg>

  <div class="wrapper">
    <h2>LOCAL TAPAS</h2>
    <p></p>
    <ul class="plates">
      <li>Loading Tapas...</li>
    </ul>
    <form class="add-items">
      <input type="text" name="item" placeholder="Item Name" required>
      <input type="submit" value="+ Add Item">
    </form>
  </div>

<script>
  const addItems = document.querySelector('.add-items');
  const itemsList = document.querySelector('.plates');
</script>

</body>
</html>

목표

내용이 새로고침시에도 변하지 않도록 내부저장소를 이용해보자.

코드 분석

function addItem(e) {
    e.preventDefault();
    const text = (this.querySelector('[name=item]')).value;
    const item = {
      text,
      done: false
    };

    items.push(item);
    populateList(items, itemsList);
    localStorage.setItem('items', JSON.stringify(items));
    this.reset();
  }

    function populateList(plates = [], platesList) {
    platesList.innerHTML = plates.map((plate, i) => {
      return `
        <li>
          <input type="checkbox" data-index=${i} id="item${i}" ${plate.done ? 'checked' : ''} />
          <label for="item${i}">${plate.text}</label>
        </li>
      `;
    }).join('');
  }

먼저, .preventDefault()를 사용하여 이벤트를 중지시킨다.
이것을 먼저 선언하고 시작하는 이유에 대해서는 뒤쪽에서 다시 설명하겠다.

사용할 변수 선언에 대한 설명을 뒤로하고 먼저 아래의 populateList부터 보겠다.
내용을 살펴보면, plates는 배열로 넣고, 이를 .map에 따라 재배열하여 리턴한다.
plates의 내용은 li이고 이 내용을 .join에 따라 ''로 묶는다. join은 배열들의 내용을 ''사이에 들어간 내용을 추가해서 연결해 주는 역할을 하는데 이곳에서는 아무런 내용이 없기 때문에 그대로 연결해주게 된다.

이제 위의 정리에 따라 분석에 적용해보면 items를 .map에 따라 재구성하여 itemslist에 넣는 방식이다.

localstorage.setitem() 는 내부저장소인 storage에 ()안의 키 이름과 값을 넣어서 저장하는 것이다.

내부저장소에 넣어두게 되면 새로고침시에도 정보가 저장되어있게 된다.

  function toggleDone(e) {
    if (!e.target.matches('input')) return; 
    const el = e.target;
    const index = el.dataset.index;
    items[index].done = !items[index].done;
    localStorage.setItem('items', JSON.stringify(items));
    populateList(items, itemsList);
  }

toggleDone이벤트의 경우 'input'값이 아니라면 아래의 내용을 진행하지 않도록 하고, 'input'값이라면 items[index.done값을 false에서 true로 만들어 주고 그 값을 똑같이 저장하여 아이템 리스트로 재구성 하여 체크박스에 체크한 내용도 저장이 되어 새로고침시에도 그대로 유지가 되도록 하는 내용이다.

  addItems.addEventListener('submit', addItem);
  itemsList.addEventListener('click', toggleDone);

  populateList(items, itemsList);

이 내용들은 내용 제출시에 addItem, 체크박스 클릭시에는 toggleDone이벤트가 나오도록 하는 내용이다.

마무리

내부저장소의 개념이 새로웠고 강의가 영어인데 길어서 그 부분이 좀 힘들었다.
끝.

반응형

'개발 > JavaScript 30' 카테고리의 다른 글

17. Sort Without Articles  (0) 2017.04.22
16. Mouse move Shadow  (0) 2017.04.22
14. JavaScript References VS Copying  (0) 2017.04.19
13. Slide in on Scroll  (0) 2017.04.19
12. Key Sequence Detection  (0) 2017.04.18

'개발/JavaScript 30' Related Articles

티스토리툴바