JS, jQuery - 주소록 만들기

Jiwontwopunch·2021년 12월 29일
TILjqueryjs
0

TIL

목록 보기
21/92
post-thumbnail

주소록 만들기

<script>
  let addressBook = [];
  let sequence = 0; // 1씩 증가하는 값
  let $ul = undefined;
  
  function printAddressBook(){
   $ul.empty();
   for(a of addressBook){
    const $li = $('<li>').text(a.ano + '.'+
                       a.irum+":"+a.tel).appendTo($ul);
  $('<button>').attr('class','delete').text('삭제')
  .attr('data-ano', a.ano).appendTo($li);
  }
 }
  
 $(document).ready(function(){
  $ul = $('#list');
  // app을 실행하면 addressBook, sequence를 localStorage에서 읽어온다
  // localStorage의 경우 키가 존재하지 않으면 값은 null
  if(localStorage.getItem('addressBook')!=null){
 addressBook = JSON.parse(localStorage.getItem('addressBook'));
 sequence = parseInt(JSON.parse(localStorage.getItem('sequence')));
  printAddressBook();
  }
  
  $('#add').click(function(){
  // 입력한 내용을 객체로 생성, ano는 1씩 증가하는 sequence로 처리
  const a = {
    ano: sequence++,
    irum: $('#irum').val(),
    tel: $('#tel').val()
  };
  
  // a와 sequence를 localStorage에 저장한 다음 화면을 갱신
  addressBook.push(a);
  localStorage.setItem('addressBook', JSON.stringify(addressBook));
  localStorage.setItem('sequence', sequence);
  printAddressBook();
  $('#irum').val('');
  $('#tel').val('');
  });
  
  $('#lick').on('click','.delete', function(){
  // 버튼에 저장된 address 번호를 읽어온다.
  const $ano = parseInt($(this).attr('data-ano'));
  
  // addressNo 배열의 모든 원소의 ano와 사용자가 선택한 버튼의
  // ano($ano) 비교해서 일치하면 원소를 삭제
  for(let i=0; i<addressBook.length; i++){
    if(aaddressBook[i].ano===$ano){
           addressBook.splice(i,1);
         }
    }
  localStorage.setItem('addressBook', JSON.stringify(addressBook));
  localStorage.setItem('sequence', sequence);
  printAddressBook();
   });
 });
</script>
  </head>
<body>
  이름:<input type="text" name="" id="irum"><br>
  연락처:<input type="text" name="" id="tel"><br>
  <button id='add'>추가</button>
  <hr>
  <ul id='list'>
  </ul>
</body>
profile
Jiwontwopunch
이전 포스트

JS, jQuery - TodoList ver.3

다음 포스트

JS, jquery - 다이어리 만들기 ver.2

0개의 댓글