local, session storage 중 local을 활용해 보자!
local 은 브라우저가 닫히면 살아지는 session과는 다르게 다시 해당 주소로 접속하면 기록을 갖고 있다.
이를 활용해서 장바구니 혹은 보관, 즐겨찾기 기능을 구현해 보자!!
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))