Storage 활용하기

local, session storage 중 local을 활용해 보자!

local 은 브라우저가 닫히면 살아지는 session과는 다르게 다시 해당 주소로 접속하면 기록을 갖고 있다.

이를 활용해서 장바구니 혹은 보관, 즐겨찾기 기능을 구현해 보자!!

localStorage

• 저장하기

localStorage.setItem('key', 'value')

• 배열 저장 (저장되는 값은 전부 문자열로 저장된다.)
• 이때 문자열로 파싱해서 저장한다.

localStorage.setItem('key[]', JSON.sringify(arr))

• 읽기

localStorage.getItem('key')

• 배열 읽기
• 문자로 저장된 내용을 다시 배열형태로 파싱!

const arr = JSON.parse(localStorage.getItem('key'))

구성

먼저 저장하기 전에 읽기를 먼저 한다.

로컬스토리지에 저장된 배열을 읽고

배열에 지금 추가하고자 하는 데이터가

있다면 삭제

없다면 추가!

interface PickMovie {
  poster: string | undefined
  title: string | undefined
  year: string | undefined
  imdbid: string | undefined
}
// 관련코드 이외 부분 생략...
const { poster, title, year, imdbid } = event.currentTarget.dataset
    const pickArr = JSON.parse(localStorage.getItem('pickArr') || '[]')

    let isMovie: boolean = false
    pickArr.forEach((movie: PickMovie) => {
      if (movie.imdbid === imdbid) {
        isMovie = true
      }
    })

    let newArr: PickMovie[]
    if (isMovie) {
      newArr = pickArr.filter((movie: PickMovie) => movie.imdbid !== imdbid)
    } else {
      const pickMovie: PickMovie = { poster, title, year, imdbid }
      newArr = [...pickArr, pickMovie]
    }
    localStorage.setItem('pickArr', JSON.stringify(newArr))