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

wirte.html

중요 코드만

// 작업: 일기를 작성하면 localStorage에 저장한 다음 list.html로
// 저장을 위한 변수: diaries 배열과 sequence 변수

// 이미 저장한 일기가 있다면 localStorage에서 읽어온다.
let diaries = JSON.parse(localStorage.getItem('diareis'));
let sequence = localStorage.getItem('sequence');
if(diaries===null) diaries=[];
if(sequence===null) sequence=1;

$(document).ready(function(){
   $('#add').click(function(){
      // diary 하나 생성
     const diary = {
       index: sequence++,
       day: $('#day').val(),  // yyyy-MM-dd
       title: $('#title').val(),
       content: $('#content').val()
     };
  // 배열의 뒤에 값을 추가한다.
  // diaries.push(diary);
  // 배열의 앞에 추가한다.
  diaries.unshift(diary);
     
 // localStorage에 저장: 데이터는 문자열로 변환해서 저장
  // 객체는 localStorage에 저장 불가능
  // 객체나 객체 배열의 경우 json으로 변경해서 저장
  localStorage.setItem('diaries',JSON.stringify(diaries));
  localStorage.setItem('sequence', sequence);
  // 이동
  location.href='list.html';
   });
});

list.html

중요 코드만

// localStorge에서 diaries를 읽어와 table에 추가한다.
// 내용이 없다면? for문이 안돈다.
$(document).ready(function(){
  const diaries = 
              JSON.parse(localStorage.getItem('diaries'));
  const $list = $('#list');
  $.each(diaries, function(idx,diary){
    const $tr = $('<tr>').appendTo(#list);
    $('<td>').text(diary.index).appendTo($tr);
    $('<td>').text(diary.day).attr('class','day')
    .attr('data-idx',diary.index).appendTo($tr);
    const $td = $('<td>').appendTo($tr);
    $('<a>').attr('href','read.html?index='+diary.index)
    .text(diary.title).appendTo($td);
  });
  // 날짜를 클릭해도 read.html로 넘어가도록 하자.
  // 단 여기는 data- 로 처리
  $('#list').on('click','.day',function(){
    location.href=
          'read.html?index='+$(this).attr('data-index');
  });
});

read.html

주요 코드만

// read.html?index=21
// read.html?index=3547
// indexOf는 문자열에서 문자의 위치를 찾는다. 못 찾으면 -1
let querystring = location.search;
// substr(위치, 너비)
// querystring이 없을 경우 indexOfEqual은 -1이 된다.
let indexOfEqual = querystring.indexOf('=');
if(indexOfEqual===-1){
  alert('올바르지 않은 접근경로입니다1.');
  location.href='list.html';
}
let index = parseInt(querystring.substr(indexOfEqual+1));

$(document).ready(function(){
  const diaries =
             JSON.parse(localStorage.getItem('diaries'));
  let diary = undefined;
  $.each(diaries, function(idx,d){
    if(d.index===index){
      diary =d;
      // .each문을 빠져나올 때는 return false;
      return false;
    }
  });
  if(diary===undefined){
    alert('올바르지 않은 접근경로입니다2.');
    location.href='list.html';
  } else {
    $('#day').val(diary.day);
    $('#title').val(diary.title);
    $('#content').val(diary.content);
  }
});