Javascript [8]

1.로컬스토리지에 배열안에 객체형태로 값을 넣기

2.key값으로 해당 선택되어있는 영화의 id값을 불러오기

3.선택한 영화를 바로 localstorage에 넣지말고 a태그를활용해 페이지 이동시키기

1.로컬스토리지 배열안에 객체형태로 값 넣기

function inputDetail(movieId) {
  const form = document.getElementById("form");
  const inputHtml = `
  <input type="text" id="reviewer" placeholder="작성자명">
  <input type="text" id="review" placeholder="리뷰작성">
  <input type="text" id="pwd" placeholder="비밀번호">
    <button id="saveButton">저장</button>
  `;
  form.innerHTML = inputHtml;
  const save = document.getElementById("saveButton");
  form.addEventListener("submit", (e) => rereview(e, movieId));
}
inputDetail(movieId);

위 코드처럼 form태그안에 저장해야할 값3가지를 input에 넣어서 버튼을 submit하는 함수를 생성한다

const rereview = (e, movieId) => {
  e.preventDefault(); //생략시 저장이 되지않음
  const object = [ //object라는 배열안에 객체형태로 input안에 3가지 value를 넣는다
    {
      reviewer: document.getElementById("reviewer").value,
      review: document.getElementById("review").value,
      pwd: document.getElementById("pwd").value,
    },
  ];
  const objString = JSON.stringify(object);
  localStorage.setItem(movieId, objString);
  reviewList();
};

2.key값으로 주소값에 있는 id값을 가지고와서 활용

const urlSearch = new URLSearchParams(location.search);
const movieId = urlSearch.get("id");

useQuery를 이용해서 해당 주소값에서 id값을따로 빼온뒤에 위에 key값으로 넣어야함.

3.선택한 영화를 localstorage가 아닌 a태그를통해서 페이지 이동

    const movieId = list.id; // movieId에 list.id를 삽입
    divLink.href = `/detail.html?id=${movieId}`;

추가해야 할것들

• 저장시에 저장된 리스트를 불러오는일
• 하나의 key값에 여러개의 value를 넣는것
• 수정과 삭제