자바스크립트 Local Storage를 이용한 문서 검색 기능 개발

15 Sep 2023

javascript

Local Storage

지난 주에 우리는 자바스크립트의 Local Storage에 대해 배웠습니다. 이번에는 실제로 Local Storage를 활용하여 간단한 문서 검색 기능을 개발해보려고 합니다. 이 기능을 통해 사용자는 웹 페이지 내에 저장된 문서를 검색할 수 있습니다.

문제 해결 방법

사용자가 검색어를 입력하면, 입력된 검색어를 Local Storage에 저장합니다.
페이지가 로드될 때, Local Storage에 저장된 검색어가 있는지 확인하고, 있다면 해당 검색어를 가져와 사용자에게 보여줍니다.
사용자가 검색어를 입력하는 동안, 실시간으로 검색 결과를 보여주기 위해 입력 이벤트를 사용합니다.
검색 결과를 화면에 표시합니다.

예시 코드

// 사용자가 검색어를 입력한 경우
function searchDocuments() {
  // 검색어 가져오기
  const searchInput = document.getElementById('search-input');
  const query = searchInput.value;

  // 검색어를 Local Storage에 저장
  localStorage.setItem('searchQuery', query);

  // 검색 결과 표시
  const searchResults = searchDocumentsFromLocalStorage(query);
  displaySearchResults(searchResults);
}

// 페이지가 로드될 때
window.addEventListener('DOMContentLoaded', function() {
  // Local Storage에서 검색어 가져오기
  const searchQuery = localStorage.getItem('searchQuery');

  // 검색어가 있다면 입력 필드에 표시
  if (searchQuery) {
    const searchInput = document.getElementById('search-input');
    searchInput.value = searchQuery;

    // 검색 결과 표시
    const searchResults = searchDocumentsFromLocalStorage(searchQuery);
    displaySearchResults(searchResults);
  }
});

// 실제로 Local Storage에서 문서를 검색하는 함수
function searchDocumentsFromLocalStorage(query) {
  // Local Storage에서 문서 목록 가져오기
  const documents = localStorage.getItem('documents');

  // 검색 로직 적용 후 결과 반환
  // ...

  return searchResults;
}

// 검색 결과를 화면에 표시하는 함수
function displaySearchResults(results) {
  // 결과 표시 로직
  // ...
}

결론

이렇게 자바스크립트로 Local Storage를 활용한 간단한 문서 검색 기능을 개발할 수 있습니다. 사용자는 검색어를 입력하고, 검색 결과를 실시간으로 확인할 수 있습니다. 이러한 기능을 통해 웹 페이지의 사용자 경험을 향상시킬 수 있습니다.

#javascript #localstorage #문서검색