[UMC]localstorage

Web 6주차 워크북

UMC notion

📝 실습 체크리스트

• 실습결과 : https://chlwlstlf.github.io/UMC/index6.html

  const comments = [];
  
  function saveItem() {
    localStorage.setItem("comments", JSON.stringify(comments));
  }
  
  function displayHistory() {
    const savedComments = JSON.parse(localStorage.getItem("comments"));
  
    savedComments.map[
      (comment) => {
        const newCommentItem = commentItemTemplate(comment);
        comments.push(comment);
        $commentList.insertAdjacentHTML("afterbegin", newCommentItem);
      }
    ];
  }
  
  displayHistory();
  

🔥트러블 슈팅(실패한 경험도 성장을 위한 경험!)

• 트러블 슈팅 양식
  [ 문제 원인 ]
  [ 해결 방안 ]
  [ 참고 자료 ]

핵심 키워드 🎯

• local Storage

  setItem : localstorage 정보를 저장할 때 사용하는 메소드

  localStorage.setItem("name", "dwell");
  localStorage.setItem("age", 100); //100은 문자
  

  getItem : localstorage에서 정보를 가져올때 사용하는 메소드

  const result = localStorage.getItem("age");
  

  JSON.stringify, JSON.parse : 배열 저장, 읽기

  const travel = {
  	destinations : {'paris', 'sydney', 'taipei'},
  	days : 100,
  	mate : undefined,
  	isAvailable : true
  }
  localStorage.setItem('travel', JSON.stringify(travel)); //문자열 변환
  const data = JSON.parse(localStorage.getItem('travel')); //객체로 인식
  console.log(data.destinations);
  

  removeItem : 삭제

  localStorage.removeItem("name");
  localStorage.clear(); //모두 삭제
  

6주차 수업 후기 📢

• 6주차 수업을 듣고 서로 느낀 점을 이야기해주세요!
• 핵심 키워드에 대해 완벽하게 이해했는지? 혹시 이해가 안 되는 부분은 뭐였는지? 서로 이야기해주세요!

!주의사항

1. 과제 피드백 기반 진행입니다 - 한명씩 본인의 과제를 발표하는 시간 그리고 해온 과제에 대한 피드백을 하는 시간 (ex:전 이렇게 생각해서 이런 부분 다르게 해왔는데 저것도 괜찮은 것 같아요!)이 무조건 기반이 되어야 합니다!
2. 부가적으로 워크북에서 제공되는 키워드 혹은 강의에서 들은 디테일 적인 부분에서 더 토의해봐도 좋을 것 같습니다

논의해보면 좋은 것들 🔥

• Local Storage와 Session Storage의 차이에 대해 알아보기
• Local Storage가 사용되는 기능에 대해 리스트업 해보기