자바스크립트 Local Storage를 이용한 웹 사이트 검색 기능 구현

15 Sep 2023

javascript

소개

이번 글에서는 자바스크립트의 Local Storage를 활용하여 웹 사이트의 검색 기능을 구현하는 방법에 대해 알아보겠습니다. Local Storage는 웹 브라우저에 데이터를 저장할 수 있는 기능으로, 사용자가 웹 사이트에서 검색한 키워드를 저장하여 다음에 다시 접속했을 때 이력을 보여줄 수 있는 기능을 구현할 수 있습니다.

구현 방법

1. 검색 입력란과 버튼 만들기

먼저 HTML 파일에 검색을 위한 입력란과 검색 버튼을 만들어야 합니다. 아래는 예시 코드입니다.

<input type="text" id="search-input">
<button id="search-btn">검색</button>
<ul id="search-results"></ul>

2. 검색어 저장하기

검색 버튼을 클릭했을 때, 입력된 검색어를 Local Storage에 저장해야 합니다. 아래는 예시 코드입니다.

const searchBtn = document.getElementById('search-btn');
const searchInput = document.getElementById('search-input');

searchBtn.addEventListener('click', function() {
  const searchValue = searchInput.value;
  
  if (searchValue !== '') {
    // Local Storage에 검색어 저장
    localStorage.setItem('searchHistory', searchValue);
  }
});

3. 검색어 불러오기

웹 페이지가 로드될 때, Local Storage에서 검색어를 불러와 이력을 보여주어야 합니다. 아래는 예시 코드입니다.

window.addEventListener('DOMContentLoaded', function() {
  const searchHistory = localStorage.getItem('searchHistory');
  
  if (searchHistory !== null) {
    const searchResults = document.getElementById('search-results');
    // 이력을 보여줄 요소 생성
    const listItem = document.createElement('li');
    listItem.textContent = searchHistory;
    searchResults.appendChild(listItem);
  }
});

4. 이력 삭제하기

일부 사용자는 검색 이력을 삭제하고 싶을 수 있으므로, 삭제 기능도 추가해야 합니다. 아래는 예시 코드입니다.

const clearBtn = document.getElementById('clear-btn');

clearBtn.addEventListener('click', function() {
  // Local Storage에서 검색어 삭제
  localStorage.removeItem('searchHistory');
  // 검색 결과를 보여주는 요소 초기화
  const searchResults = document.getElementById('search-results');
  searchResults.innerHTML = '';
});

마무리

위의 구현 방법을 따라가면 웹 사이트에서 간단한 검색 기능을 구현할 수 있습니다. Local Storage를 활용하여 사용자의 검색 이력을 저장하고 보여주는 기능을 구현함으로써 사용자 경험을 향상시킬 수 있습니다.

#javascript #localstorage