자바스크립트: 검색어 캐시 (객체에 저장, 브라우저 세션에 저장)

출처: javascript #디자인패턴 – 메모이제이션 패턴 (memoization pattern)

API 호출을 사용하여 검색 기능을 구현할 때 이미 입력한 적이 있는 검색어는 추가 요청을 하지 않고 캐시에 있는 결과를 가져다 써서 불필요한 네트워크 요청을 줄일 수 있습니다.

객체를 이용하는 방법

(async () => {
    let inputItemId = document.getElementById("itemId") // input[type=text] 요소

    async function searchItem(id) {
        if (searchItem.cache.hasOwnProperty(id)) {
            console.log("from cache", searchItem.cache[id])
            return
        }
        try {
            const response = await fetch("https://reqres.in/api/users/" + id)
            const json = await response.json()
            searchItem.cache[json.data.id] = json.data

            console.log(searchItem.cache[id])
        } catch (err) {
            alert(err.message)
        }
    }
    searchItem.cache = {}

    // #search: button 요소
    document.getElementById("search").addEventListener("click", () => {
        searchItem(inputItemId.value);
    })
})();

• 함수 searchItem에 cache 키를 추가한 다음 객체를 지정합니다.
• hasOwnProperty(id)를 통해 해당 키가 객체 내에 있으면 이미 검색된 아이디이므로 api 요청을 하지 않고 if문을 실행시킵니다.
• 캐시 내에 없으면 검색된 적이 없는 경우이므로 fetch를 실행합니다.

searchItem 함수에 cache 가 추가되었습니다.

아래 검색 결과는 아이디 1번을 네 번 검색, 2, 3번을 각각 세번 검색했습니다.

여러 번 검색했음에도 불구하고 캐시 기능을 이용하여 네트워크 요청은 3회만 전송하였습니다.

세션스토리지(SessionStorage)를 이용하는 방법

자바스크립트에서 sessionStorage 는 유효 범위가 window 객체와 같으며 탭이나 창이 닫힐 때 까지 자료가 유지됩니다. localStorage는 지우기 명령을 내리기 전까지는 해당 브라우저에 영구 저장됩니다.

이 두 저장소는 텍스트만 저장할 수 있기 때문에 JSON.stringify(), JSON.parse() 기능을 이용해야 하므로 다소 비효율적입니다.

위 예제에 있는 객체를 이용한 캐싱은 별도 파싱이 필요 없고 속도도 빠르지만 페이지가 이동되면 사라집니다.

보존 범위의 중요성에 따라 결정하면 될 것 같습니다.

(async () => {
    let inputItemId = document.getElementById("itemId");

    async function searchItem(id) {
        
        if (sessionStorage.getItem(`search_${id}`)) {
            console.log("from cache", JSON.parse(sessionStorage.getItem(`search_${id}`)))
            return
        }
        try {
            const response = await fetch("https://reqres.in/api/users/" + id)
            const json = await response.json()
            sessionStorage.setItem(`search_${id}`, JSON.stringify(json.data))
            console.log(json.data)

        } catch (err) {
            alert(err.message)
        }
    }
    
    document.getElementById("search").addEventListener("click", () => {
        searchItem(inputItemId.value);
    })
})();

여러번 검색했음에도

네트워크 요청은 3번만 되었습니다.

이것은 세션 스토리지에 남아있으며 브라우저를 끄지 않는 한 계속 유지될 것입니다.