최근에 Color Hunt라는 홈페이지를 자주 방문 했었는데, 로그인을 하지 않아도 내가 즐겨찾기 했던 아이템을 페이지를 끄고 나서도 존재하는 것이 신기했습니다.
처음에는 컴퓨터 IP를 key로 해서 해당 사이트의 서버에 만든 컬렉션이 들어간다고 예상하고 기존에 쓰던 크롬 브라우저가 아닌 MS 엣지로 같은 홈페이지에 들어가서 확인을 했었는데요. 제가 저장했던 리스트가 생성되지 않은 상태였기 때문에 용의선상에서 제외되었습니다.
그렇다면 스토리지와 쿠키 둘 중에 하나일 것이라고 추측했습니다.
그래서 개발자 도구를 열어서 확인했더니...
데이터가 이렇게 많다고요...?
저는 스토리지의 데이터 크기가 5MB 정도인 것은 알고 있었는데, 생각보다 많은 데이터들이 해당 사이트에 저장되어 있었습니다.
하나하나 살펴봤다고 생각했는데도 도무지 찾을 수가 없어서 멘토님께도 도움을 요청해서 다른 방법을 이용한건지 여쭤보기도 했는데요.
결국 무심코 지나쳤던 부분에서 해당 데이터가 저장 되는 곳을 찾아주셨습니다. 개발자의 감...으로 찾는 것이라고 하셨습니다.
저도 이런 감을 차곡차곡 잘 쌓고 싶다는 생각이 들더라고요!
이때의 기억을 되살려 투두리스트에 즐겨찾기 기능을 추가해보기로 했습니다!
로컬 스토리지를 쓰는 방법은 간단합니다.
읽어올 때는 JSON.parse(localStorage.getItem(key))
작성할 때는 localStorage.setItem(key, JSON.stringify(데이터))
웹 스토리지는 오로지 String 타입만 지원하기 때문에, 배열이나 객체데이터를 사용하기 위해서는 데이터를 쓰기 전에 JSON.stringify 함수로 직렬화 하고, 읽기 전에 JSON.parse()함수로 역직렬화 해야합니다.
const addBookmark = () => {
let newState = [];
bookmarkList
? !bookmarkList.includes(title)
? (newState = [...bookmarkList, title])
: (newState = bookmarkList)
: (newState = [title]);
localStorage.setItem("title", JSON.stringify(newState));
setBookmarkList(newState);
};즐겨찾기 버튼의 onClick 속성에 addBookmark 함수를 작성했습니다.
로컬 스토리지의 title이 담긴 bookmarkList를 검증하는 이유는 로컬 스토리지가 비어 있을 때에는 null이고, null은 iterable(반복 가능)한 데이터가 아니므로 전개 연산자를 사용할 수 없기 때문입니다.
중복 데이터가 들어가지 않게 하는 데에도 삼중 연산자를 썼습니다.
정상적으로 로컬 스토리지에 저장되었습니다!
글을 쓰면서 다시 보니, 참고했던 Color Hunt 사이트는 배열은 콤마(,)로 분리만 해서 사용하는 형태였고, 그렇게 되면 파싱할 때 전개연산자를 사용할 필요가 없어지는 것을 깨닫고 대괄호와 따옴표 없이 콤마로만 저장하는 형태로 바꾸어 주었습니다.
