즐겨찾기를 Cookie로 저장했다가 localStorage로 옮긴 이유

만료 때문에 사라지던 즐겨찾기

#프론트엔드 #localStorage #브라우저

며칠 만에 코인 사이트에 들어갔더니 즐겨찾기 해둔 코인들이 싹 사라져 있었다. 분명 별표 눌러놨는데 텅 비어 있는 거다. 사용자였으면 "내가 저장한 게 왜 없어졌지?" 싶었을 거다. 범인은 내가 즐겨찾기를 Cookie에 저장한 거였다. 이 사이트는 로그인 없이도 쓰게 만드는 게 목표라, 로그인 안 한 사용자의 즐겨찾기를 브라우저에 저장해야 했다. 이 글에선 왜 Cookie를 버리고 localStorage로 옮겼는지 정리해본다. Cookie는 결국 사라진다 Cookie는 expires(만료 시간) 가 있다. 만료일을 지정하면 그때 사라지고, 안 지정하면 브라우저 닫을 때 사라진다. 즐겨찾기처럼 계속 남아 있어야 하는 데이터엔 이게 영 안 맞았다. 만료를 길게 잡아도 결국 "언젠가는 사라지는" 데이터라는 게 찜찜했다. 그리고 실제로 위에처럼 며칠 만에 비어버리는 일이 터졌다. Cookie의 다른 단점들 만료 말고도 즐겨찾기 저장에 Cookie가 안 맞는 이유가 더 있었다. 1. 요청마다 서버로 따라간다 — Cookie는 모든 HTTP 요청 헤더에 자동으로 붙는다. 서버는 즐겨찾기 정보가 전혀 필요 없는데도 매 요청마다 같이 전송된다. 순수 낭비다. 2. 용량이 작다 — Cookie는 보통 4KB 제한이라, 즐겨찾기가 늘어나면 금방 한계가 온다. 3. 다루기 번거롭다 — 문자열 파싱에 만료 설정에, 코드가 지저분해진다. localStorage로 옮기기 localStorage는 이 문제들이 다 없다. 만료가 없어서 지우기 전까지 영구 보관 되고, 용량도 훨씬 넉넉하고(보통 5~10MB), 서버 요청에 딸려가지도 않는다. 그리고 API가 단순하다. // 저장 localStorage.setItem('favorites', JSON.stringify(favorites)); // 읽기 const favorites = JSON.parse(localStorage.getItem('favorites') || '[]'); // 삭제 localStorage.removeItem('favorites'); Cookie 만료 신경 쓰던 코드가 다 사라지고 이렇게 깔끔해졌다. 로그인 안 한 사용자의 즐겨찾기는 이제 브라우저를 닫았다 열어도, 며칠이 지나도 그대로 남아 있다. 그럼 Cookie는 언제 쓰나 Cookie가 나쁜 건 아니다. 서버가 읽어야 하는 정보 (로그인 세션, 인증 토큰)는 Cookie가 맞다. 요청마다 자동으로 서버에 따라가는 그 특성이 거기선 오히려 장점이다. 반대로 클라이언트만 쓰는 정보 (즐겨찾기, UI 설정, 테마)는 굳이 서버로 보낼 이유가 없으니 localStorage가 맞다. 결국 "이 데이터를 서버가 알아야 하나?"로 갈리는 거였다. 정리하면 저장소 고르는 기준은 단순했다. 서버가 읽어야 하면 Cookie, 클라이언트만 쓰면 localStorage . 즐겨찾기는 명백히 후자였는데 처음에 잘못 골라서 만료 문제로 고생했다. 작은 선택 같지만, 데이터 성격에 맞는 저장소를 고르는 것만으로도 불필요한 버그랑 트래픽을 줄일 수 있었다. 브라우저 저장소는 종류별로 성격이 분명하니까, 처음에 잠깐 따져보고 고르는 게 나중에 고생을 던다.