로컬스토리지 검색어 기능 만들기

안녕하세요 TriplexLab입니다.
오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다.

로컬 스토리지(localStorage)

로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇

[JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리

이것은 CRUD 중에서 C와 D에 해당되는 내용입니다.
음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요.
프론트나, 퍼블리셔 입장에서는 개인 포폴 만들 때 유용하게 쓸 수 있을 것 같네요.
(참고 근데 네이버에서도 로컬 스토리지를 사용하고 있네요!!)
아래 미리보기를 보시면 아시겠지만 새로고침을 해도 내역이 사라지지 않은 모습을 확인할 수 있습니다.

CRUD 참고 👏👏

Create	생성
Read(또는 Retrieve)	읽기
Update	갱신
Delete(또는 Destroy)	삭제

<div class="wrapper">
        <form id="todo-form" class="form">
            <input required maxlength="10" type="text" placeholder="SEARCH">
        </form>
        <button type="submit" form="todo-form">제출하기</button>
        <div class="todo-inner">
            <div class="allDelete off">
                <h2 class="tit">최근 검색어</h2>
                <span class="btn">모두 지우기 ❌</span>
            </div>
            <p class="txt"></p>
            <ul id="todo-list"></ul>
        </div>
    </div>

const toDoForm = document.querySelector('#todo-form');
const toDoInput = toDoForm.querySelector('input');
const toDoList = document.querySelector('#todo-list');
const allDelete = document.querySelector('.allDelete');
const txt = document.querySelector('.txt');
const TODOS_KEY = "todos";

let toDos = new Array();

function saveToDos() { //item을 localStorage에 저장합니다.
    typeof(Storage) !== 'undefined' && localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
};

function allDeleteToDo() { //전체 item을 삭제
    localStorage.clear(toDos);
    toDoList.innerText = '최근검색어 내역이 없습니다.';
};

function deleteToDo(e) { //각각의 item을 삭제
    const li = e.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
    toDos.length === 0 && (txt.innerText = '최근검색어 내역이 없습니다.')
    saveToDos();
};

function paintToDo(newTodo) { //화면에 뿌림
    const {id, text} = newTodo;
    const item = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    item.id = id;
    span.innerText = text;
    button.innerText = '❌';
    button.addEventListener("click", deleteToDo);
    allDelete.addEventListener("click", allDeleteToDo);
    item.appendChild(span);
    item.appendChild(button);
    toDoList.appendChild(item);
    newTodo !== null && allDelete.classList.remove('off');
};

function handleToDoSubmit(event) { //form 전송
    event.preventDefault();
    const newTodoItem = toDoInput.value;
    toDoInput.value = '';
    const newTodoObj = {
        id: Date.now(),
        text: newTodoItem
    };
    toDos.push(newTodoObj);
    paintToDo(newTodoObj);
    saveToDos();
};

toDoForm.addEventListener('submit', handleToDoSubmit);

const savedToDos = JSON.parse(localStorage.getItem(TODOS_KEY));
if(savedToDos !== null) {
    toDos = savedToDos //전에 있던 items들을 계속 가지도 있다록 합니다. 
    savedToDos.forEach(paintToDo);
}

결과) 로컬스토리지 검색어 기능 👇👇

해당 내용 코드를 파일로 제공 합니다. 
관심 있으신 분들은 다운 받아서 확인 해보세요 👍👍

todo.zip

0.00MB