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

auth.js

// 로그인 되어 있는 상태 (list.html, write.html, read.html)
// 1. 로그인이 되어 있지 않다면 login.html로 이동
if(sessionStorage.getItem('username')==null){
  location.href = 'login.html';
}

$(document).ready(function(){
   // 2. 로그아웃 처리
   // <li><a href='#'>로그아웃</a></li> 여기서 a태그의 동작이
   // 두 동작 : 클릭 하고 이동
   // 마찬가지로 <input type='submit'>과 <form><button>
   // 두 번쨰 동작(이동)을 비활성화시키고 싶다?
   $('#logout').click(function(e){
      // 두 번쨰 동작(이동)을 끈다.
       e.preventDefault();
     
   // <div id='1'><div id='2'><div id='3'>여기클릭
   // </div></div></div>
   // js에서 위와 같은 요소들이 중첩되어 있을 때 이벤트는 좁은
   // 요소부터 넓은 요소로 순서대로 실행된다.
   // stopPropgatation을 호출하면 넓은 쪽으로 이벤트를 넘기지X
    e.stopPropagation();
     
    sessionStorage.clear();
    location.href = 'login.html';
   });
 
  // 3. 로그인한 경우 메뉴 처리 - 글쓰기, 로그아웃 버튼 보이기
  $('.nav li').css('display','none');
  $('#write').css('display','inline-block');
  $('#logout').css('display','inline-block');
  });

anoymous.js

// 1. 로그인했다면 루트 페이지로 이동
if(sessionStorage.getItem('username')!=null){
  location.href = 'list.html';
}
// 2. 비로그인에 대한 메뉴 처리 - 회원가입, 로그인 버튼 보이기
$(document).ready(function(){
   $('.nav li').css('display','none');
   $('#join').css('display','inline-block');
   $('#login').css('display','inline-block');
});

join.html

중요 코드만

// 로그인 했다면 list.html로 보내자
if(sessionStorage.getItem('username')!=null){
   location.href = 'list.html';
}

$(document).ready(function(){
   $('#btn_join').click(function(){
       // 아이디와 비밀번호는 영숫자 4~10자
       const pattern = /^[A-Za-z0-9]{4,10}$/;
     
     const $username = $('#username').val();
     const $password - $('password').val();
     
     if($username==''||$password==''){
        alert('아이디와 비밀번호는 필수입력입니다.');
        return false;
     }
     if(pattern.test($username)==false||
        pattern.test($password)==false) {
        alert('아이디와 비밀번호는 영숫자 4~10자리 입니다');
        return false;
     }
     localStorage.setItem('username',$username);
     localStorage.setItem('password',$password);
     location.href = 'login.html';
   });
})

login.html

중요 코드만

// 1. 비로그인 - 로그인에 실패 후 이동한 경우 오류메시지
let querystring = location.search.substr(1);
if(querystring==='error') alert('로그인 실패');

$(document).ready(function(){
   $('#btn_login').click(function(){
    // 사용자가 입력한 아이디와 비밀번호
    const $inputUsername = $('#username').val();
    const $inputPassword = $('#password').val();
     
    // 회원가입한 아이디와 비밀번호
    const username = localStorage.getItem('username');
    const password = localStorage.getItem('password');
    if(username===$inputUsername &&
       password===$inputPassword) {
     // 로그인 성공 - sessionStorage는 브라우저를 닫으면 사라짐
      sessionStorage.setItem('username',username);
      location.href = 'list.html';
    } else {
      // 로그인 실패
      location.href = 'login.html?error';
    }
   });
})

location.search → urlencoded로 변환
substr() : 문자열에서 특정한 구역의 문자열을 추출
문자열.substr(start,[length])-1 → " " 빈문자열 반환

write.html

중요 코드만

let diaries = [];
let sequence = 1;
if(localStorage.getItem('diaries')!=null){
  diaries = JSON.parse(localStorage.getItem('diaries'));
}
if(localStorage.getItem('sequence')!=null){
  sequence = parseInt(localStorage.getItem('sequence'));
}

$(document).ready(function(){
  $('#btn_add').click(function(){
    // 일기 작성일, 제목과 내용은 필수입력
    // 그런데 패턴 체크는 불가능
    const $day = $('#day').val();
    const $title = $('#title').val();
    const $content = $('#content').val();
    if($day==''||$title==''||$content==''){
      alert('작성일, 제목, 내용은 필수입력입니다');
      return false;
    }
    const diary = {
      index: sequence++,
      title: $title,
      content: $content,
      day: $day
    };
    diaries.unshift(diary);
    localStorage.setItem('diaries',
                         JSON.stringify(diaries));
    localStorage.setItem('sequence', sequence);
    location.href = 'list.html';
  });
})

list.html

중요 코드만

// vanilla js
$(document).ready(function(){
  const diaries =
        JSON.parse(localStorage.getItem('diaries'));
  const $list = $('#list');
  $.each(diaries, function(index, diary){
    const $tr = $('<tr>').appendTo($list);
    $('<td>').text(diary.index).appendTo($tr);
    const $td = $('<td>').appendTo($tr);
    $('<a>').attr('href','read.html?index=' + diary.index)
    .text(diary.title).appendTo($td);
    $('<a>').text(diary.day).appendTo($tr);
  });
});

read.html

중요 코드만

// location.search : ?index=111
// substr(위치,너비) → 위치만 주면 끝까지 자른다
// substring(시작위치, 끝위치)
const positionOfEqual = location.search.indexOf('=');
const index =
      parseInt(location.search.substr(positionOfEqual+1));

$(document).ready(function(){
  const diaries =
        JSON.parse(localStorage.getItem('diaries'));
  $.each(diaries, function(idx, diary){
    if(diary.index==index){
      $('#day').val(diary.day);
      $('#title').val(diary.title);
      $('#content').val(diary.content);
      return false;
    }
  });
  
  $('#btn_delete').click(function(){
    for(let idx=0; idx<diaries.length; idx++){
      if(diaries[idx].index==index){
        diaries.splice(idx,1);
        localStorage.setItem
        ('diaries',JSON.stringify(diaries));
        location.href = 'list.html';
      }
    }
  });
});

const index=parseInt(location.search.substr(positionOfEqual+1));인덱스 추출하는 방법은 URL에서 파라미터 추출방법과 똑같다.
ex)
const params=location.search.substr(location.search.indexOf("?")+1);