본문 바로가기
JavaScript30 Challenge

[JavaScript30] Day 15

future :) 2020. 6. 25. 22:14

LocalStorage

 

 

전송될 때, 발생하는 이벤트 생성

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = [];

function addItem(e) {
  console.log('Hello');
}

addItems.addEventListener('submit', addItem);

 

전송을 하게 되면 Hello라는 글씨가 잠깐 나타났다 사라지는 것을 볼 수 있습니다.

전송하면서 페이지가 새로고침되기 때문인데 설정에서 Preserve log를 체크하면 log를 남길 수 있습니다.

 

 

 

전송되면서 페이지가 새로고침 되는 것을 방지

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault(); // 페이지가 새로 로드되지 않음.
  console.log('hello');
}

addItems.addEventListener('submit', addItem);

 

 

인풋에 입력한 내용 저장하기

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name', // ES6의 property shorthand는 key값과 value의 값이 같으면 한번만 표기할 수 있다.
    text,
    done: false
  };
  console.log(item);
}

addItems.addEventListener('submit', addItem);

 

 

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name',
    text,
    done: false
  };
  // console.log(item);

  items.push(item);
  this.reset();
}

addItems.addEventListener('submit', addItem);

 

input창에 fish를 입력하고, 다음에 squid를 입력합니다.

콘솔창에서 items를 확인해보면 2개가 저장된 것을 볼 수 있습니다.

 

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name',
    text,
    done: false
  };
  // console.log(item);

  items.push(item);
  populateList(items, itemsList);
  this.reset();
}

function populateList(plates = [], platesList) {
  platesList.innerHTML = plates.map((plate, i) => {
    return `
      <li>
        <label for="">${plate.text}</label>
      </li>
    `;
  }).join('');

}

addItems.addEventListener('submit', addItem);

 

이제 입력한 것이 등록됩니다.

 

 

체크박스 체크된 것과 체크 안된 것 구분

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
const items = [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name',
    text,
    done: false
  };
  // console.log(item);

  items.push(item);
  populateList(items, itemsList);
  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('');

}

addItems.addEventListener('submit', addItem);

 

 

 

입력 해 놓은 목록을 새로고침해도 유지

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
// const items = [];
const items = JSON.parse(localStorage.getItem('items')) || [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name',
    text,
    done: false
  };
  // console.log(item);

  items.push(item);
  populateList(items, itemsList);
  // localStorage.setItem('items', items);
  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('');

}

addItems.addEventListener('submit', addItem);

populateList(items, itemsList);

 

 

목록의 체크박스의 상태를 새로고침해도 유지

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
// const items = [];
const items = JSON.parse(localStorage.getItem('items')) || [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name',
    text,
    done: false
  };
  // console.log(item);

  items.push(item);
  populateList(items, itemsList);
  // localStorage.setItem('items', items);
  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('');

}

addItems.addEventListener('submit', addItem);

const checkBoxes = document.querySelectorAll('input');

checkBoxes.forEach(input => input.addEventListener('click', () => alert('hi')));

populateList(items, itemsList);

alert이 input의 입력창 부분에서는 제대로 작동하지만 checkbox부분에서는 제대로 작동하지 않음

 

 

addItems.addEventListener('submit', addItem);

populateList(items, itemsList);

const checkBoxes = document.querySelectorAll('input');

checkBoxes.forEach(input => input.addEventListener('click', () => alert('hi')));

순서를 위와같이 수정해주면 checkbox를 클릭할 때에도 alert이 제대로 작동

 

function toggleDone(e) {
  console.log(e.target);
}

 

 

function toggleDone(e) {
  if(!e.target.matches('input')) return; // input이 아니면 건너뜁니다.
  console.log(e.target);
}

 

 

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
// const items = [];
const items = JSON.parse(localStorage.getItem('items')) || [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name',
    text,
    done: false
  };
  // console.log(item);

  items.push(item);
  populateList(items, itemsList);
  // localStorage.setItem('items', items);
  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('');

}

function toggleDone(e) {
  if(!e.target.matches('input')) return; // input이 아니면 건너뜁니다.
  console.log(e.target);
}

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

populateList(items, itemsList);

// const checkBoxes = document.querySelectorAll('input');
// checkBoxes.forEach(input => input.addEventListener('click', () => alert('hi')));

 

 

클릭했을 때, done의 상태를 반전하고 저장

const addItems = document.querySelector('.add-items');
const itemsList = document.querySelector('.plates');
// const items = [];
const items = JSON.parse(localStorage.getItem('items')) || [];

function addItem(e) {
  // console.log('Hello');
  e.preventDefault();
  // console.log('hello');
  const text = (this.querySelector('[name=item]')).value;
  const item = {
    // text: 'Item Name',
    text,
    done: false
  };
  // console.log(item);

  items.push(item);
  populateList(items, itemsList);
  // localStorage.setItem('items', items);
  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('');

}

function toggleDone(e) {
  if(!e.target.matches('input')) return; // input이 아니면 건너뜁니다.  
  // console.log(e.target);
  const el = e.target;
  const index = el.dataset.index;
  items[index].done = !items[index].done;
  localStorage.setItem('items', JSON.stringify(items));
  populateList(items, itemsList);
}

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

populateList(items, itemsList);

// const checkBoxes = document.querySelectorAll('input');
// checkBoxes.forEach(input => input.addEventListener('click', () => alert('hi')));

 

개발자 도구 > application에서 done을 false에서 true로 변경한 후 새로고침 하면

체크박스에 체크된 것을 확인할 수 있다.

 

 

<script>
  const addItems = document.querySelector('.add-items');
  const itemsList = document.querySelector('.plates');
  const items = JSON.parse(localStorage.getItem('items')) || [];

  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 = [], plateList) {
    plateList.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('');
  }

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

  addItems.addEventListener('submit', addItem);
  itemsList.addEventListener('click', toggleDone);
  populateList (items, itemsList);
</script>

 

 

 

 

localStorage

  • WebStorage API인 localStorage는 영구적으로 값을 저장하고 싶은 경우에 사용할 수 있습니다.
  • 저장된 데이터는 만료기간이 없습니다.
  • key와 value를 string으로 저장합니다.
// 데이터 추가
localStorage.setItem('A', 'B');

// 데이터 가져오기
const a = localStorage.getItem('A');

// 데이터 지우기
localStorage.removeItem('A');

// 데이터 전체 삭제
localStorage.clear();

 

 

JavaScript30 강의를 보고 공부한 글입니다. (https://javascript30.com/)

저작자표시

'JavaScript30 Challenge' 카테고리의 다른 글

[JavaScript30] Day 17  (0) 2020.07.21
[JavaScript30] Day 16  (0) 2020.07.20
[JavaScript30] Day 14  (0) 2020.06.11
[JavaScript30] Day 13  (0) 2020.06.08
[JavaScript30] Day 12  (0) 2020.05.14

'JavaScript30 Challenge' Related Articles

티스토리툴바