로컬 스토리지 사용 관련 질문 있습니다!

Question

반갑습니다현재 국비학원에서 배우는 입장이라 많이 서툴고 모든게 새롭습니다 ㅠㅠ서버를 아직 배우지 않아서 로컬스토리지를 이용해서 댓글 (보다는 메모가 더 가깝죠) 기능을 구현을 하는 중인데,아래 html은 예시를 들기 위함인데// HTML

이름

전화번호

주소

이름

전화번호

주소

이렇게 자바스크립트에서 코드를 짜면 당연하게도 맨 위의 버튼에서만 저장이 되더라고요..각각의 input id값을 다르게 잡고 스크립트를 짜려고 시도해봤는데 제가 방법이 틀린 것 같아서 안되고 답답한 마음에 여쭤봅니다.2개 이상의 review를 저장하려면 어떻게 접근을 해야될지 잘 모르겠습니다.혹시 save, remove 버튼의 값도 다 다르게 잡아야 될까요?어떤식으로 해결 방향을 잡아야 될지 선배님들의 조언 부탁드립니다 ㅠㅠ! // JavaScript let review; function saveHandler() { localStorage.setItem('review', review.value); } function removeHandler() { localStorage.removeItem('review'); review.value = ''; } function init() { review = document.querySelector('#review'); if(localStorage.getItem('review')) { review.value = localStorage.getItem('review'); } document.querySelector('.save').addEventListener('click', saveHandler); document.querySelector('.remove').addEventListener('click', removeHandler); } window.addEventListener('load', init);

안녕하세요플레 · Answer

댓글은 게시글마다 있고, 여러 개일 수 있으므로, 댓글에는 게시글 아이디 값, 댓글 아이디 값, 작성자 아이디 값, 작성일 등이 필요합니다.페이지 로드 시 로컬 스토리지에서 전체 댓글 데이터 가져오기해당 게시글 아이디에 맞는 댓글만 필터링하기댓글들을 화면에 렌더링 하기 -> 이때 버튼 이벤트 리스너에 댓글 아이디 값을 넘겨줘서 저장하거나 삭제할 때 댓글 아이디 값을 사용

기록 · Answer

예시 HTML 코드에 id로 되어있는데, Javascript에는 class로 태그 조회하고 계시는데일단 예시라서 id로 하신 것 같긴 한데, id 같은 경우에는 태그마다 고유한 값을 주시는 게 좋습니다.그리고 class 같은 경우에도 아래처럼 querySelector로 가져오시면 첫 번째 요소만을 가져오게 되실 거예요review = document.querySelector('.review'); review.value; // HTML 문서내의 먼저 조회되는 요소의 값그래서 클래스명이 동일한 태그가 여러개인데 값을 가져오고 싶으시다면 getElementsByClassName으로 해당 요소를 배열로 받아서 각각의 값을 가져오실 수 있어요reviews = document.querySelector('.review'); for(let i = 0; i < reviews.length; i++) { reviews[i].value; }추가적으로 let review처럼 전역 변수로 선언하기 보다는saveHandler나 removeHandler 내에서 querySelector나 getElementsByName 등으로 다시 요소를 가져와서 사용하는 것이 좋아보여요

로컬 스토리지 사용 관련 질문 있습니다!

2개의 답변

기타 목록