localStorage3 [WIL 2023.06.11] 내배캠 4주차 📝 Situation(상황): 이번주 목표 지난주 개인과제로 만들었던 영화검색 사이트를 develop 영화별 상세 페이지와 상세페이지 내 댓글 기능을 필수로 하여 팀으로 사이트 완성하기 👀 Task(임무): situation 중 문제들 그 중 나는 local storage를 이용하여 댓글 기능을 만드는 역할을 맡았다. 댓글의 CRUD 구현하기와 댓글창 UI를 깔끔하게 만드는데에 목표를 두었다. 🔍 Action(접근방법): 해결시도 먼저 폼태그 안에 인풋창을 두어 제출란을 만들었다. // 코멘트 표시 function displayComments() // 코멘트 HTML 생성 function createCommentHTML(comment, index) // 새 코멘트 저장 function saveCommen.. 2023. 6. 12. [TIL 2023.06.07] localstorage 페이지 당 각각의 댓글창 구현하기 ❓발생한 이슈/고민 자바스크립트와 로컬스토리지를 이용한 댓글 CRUD 기능은 다 구현이 되었지만 각각의 영화 페이지 마다 고유의 댓글창이 나와야 하는데 모든 페이지에 똑같은 댓글이 나타나는 문제 발생 💡해결과정 문제를 해결하기 위해서는 현재의 코드에서 4가지 수정사항이 필요했다. 1. 각 영화 페이지마다 고유한 식별자를 가지고 있어야 한다. 각 영화 페이지의 URL을 사용하여 고유한 식별자를 만들어서 댓글을 구분하는데 사용할 것. 2. localStorage를 사용하여 댓글을 저장할 때, 식별자를 함께 저장해야 한다. 기존의 comments 배열 대신 객체 형태로 댓글을 저장해야 한다. 객체의 속성으로는 영화Id, username, comment, password를 포함 3. displayComments.. 2023. 6. 8. [TIL 2023.06.05] Javascript localStorage를 이용하여 댓글 기능 만들기 💻오늘 배운 내용 localStorage란? 브라우저에 key-value 값을 Storage에 저장할 수 있다. 세션이 바뀌어도 저장한 데이터가 유지된다. setItem() - key, value 추가 getItem() - value 읽어 오기 removeItem() - item 삭제 clear() - 도메인 내의 localStorage 값 삭제 length - 전체 item 개수 key() - index로 key값 찾기 localStorage는 문자열만 저장할 수 있다. [객체->문자열] 객체를 저장하려면 JSON.stringify() 메서드로 문자열로 변환한 다음 저장해야 한다. [문자열->객체] 반대로 저장된 문자열 값을 가져와서 다시 객체로 변환하려면 JSON.parse() 메서드를 사용한다. ❓.. 2023. 6. 7. 이전 1 다음
