[JavaScript] 최근 검색어 저장 기능 만들기

검색 기능을 만들다 보면, 사용자가 전에 검색했던 단어들을 다시 보여주는 기능이 필요할 때가 있는데요.
최근에 진행한 팀 프로젝트에서도 이런 기능이 필요해서, 검색어를 최대 6개까지만 저장하고 보여주는 로직을 localStorage로 구현해봤어요.
서버랑 통신할 필요 없이 프론트엔드에서만 처리할 수 있도록 간단하게 만들어봤고, 전체 코드랑 설명을 같이 정리해볼게요 😊

---

🧩 전체 코드

// 검색어 저장
const saveSearchKeyword = (keyword) => {
  const KEY = "recent_keywords";
  let keywords = JSON.parse(localStorage.getItem(KEY)) || [];

  // 중복 제거 + 맨 앞에 추가
  keywords = [keyword, ...keywords.filter((k) => k !== keyword)];

  // 6개까지만 유지
  if (keywords.length > 6) {
    keywords = keywords.slice(0, 6);
  }

  localStorage.setItem(KEY, JSON.stringify(keywords));
};

// 검색어 불러오기
const getRecentKeywords = () => {
  return JSON.parse(localStorage.getItem("recent_keywords")) || [];
};

// 특정 키워드 삭제
const deleteKeyword = (target) => {
  const updated = getRecentKeywords().filter((k) => k !== target);
  localStorage.setItem("recent_keywords", JSON.stringify(updated));
};

// 전체 삭제
const clearAllKeywords = () => {
  localStorage.removeItem("recent_keywords");
};

🔍 동작 방식 간단히 정리!

• 중복 제거: 이미 저장된 검색어는 빼고, 새로운 검색어를 맨 앞에 추가해요.
• 최대 6개 유지: slice(0, 6)을 써서 최신 검색어 6개까지만 보여줍니다.
• localStorage 사용: 서버 없이도 저장되니까 새로고침해도 그대로 남아있어요.

🧹 삭제 기능도 준비했어요

검색어를 개별로 지우거나 전체 삭제하는 기능도 같이 구현했어요.
검색어 옆에 X 버튼을 만들어서 deleteKeyword()를 함수를 호출하면 돼요.

📝 마무리하며

간단하지만 유용한 기능이죠? 😄
localStorage만 잘 활용해도 서버 없이도 이런 UX를 쉽게 구현할 수 있더라고요.
혹시 궁금한 점이나 “이건 더 좋을 것 같아요!” 하는 피드백이 있다면 댓글로 편하게 남겨주세요!