페이지를 이동했는데 데이터가 그대로? “localStorage 공유캐시”의 원리

들어가며

웹사이트를 개발하다 보면 비슷한 데이터를 계속해서 서버에 요청하게 되는 경우가 있습니다.

예를 들어 사용자가 첫 번째 페이지에서 상품 목록을 조회하고 다른 페이지로 이동했다고 생각해보겠습니다. 두 번째 페이지에서도 동일한 상품 정보가 필요하다면 다시 서버에 요청해야 할까요?

데이터가 자주 변경되지 않는 정보라면 굳이 같은 데이터를 반복해서 가져올 필요가 없을 수도 있습니다. 이럴 때 생각해볼 수 있는 방법이 바로 캐시(Cache)입니다.

그중에서도 웹 브라우저에서 간단하게 사용할 수 있는 저장 방식이 localStorage입니다.

특히 여러 페이지에서 동일한 데이터를 활용해야 하는 경우 localStorage를 일종의 공유 캐시처럼 사용하는 방법을 적용할 수 있습니다.

localStorage란 무엇일까?

localStorage는 웹 브라우저가 제공하는 웹 저장소 중 하나입니다.

JavaScript를 이용하면 브라우저에 문자열 형태의 데이터를 저장하고 다시 꺼내 사용할 수 있습니다.

가장 간단한 형태는 다음과 같습니다.

localStorage.setItem("userName", "홍길동");

const userName = localStorage.getItem("userName");

console.log(userName);

위 코드에서는 userName이라는 이름으로 데이터를 저장하고 나중에 같은 이름을 사용해 데이터를 가져옵니다.

페이지를 새로고침하거나 다른 페이지로 이동하더라도 해당 데이터가 유지된다는 것이 일반적인 JavaScript 변수와 다른 점입니다.

물론 사용자가 직접 브라우저 저장 데이터를 삭제하거나 브라우저 정책 등에 의해 제거될 수 있으므로, 영구적인 데이터베이스라고 생각해서는 안 됩니다.

그렇다면 왜 localStorage를 공유캐시로 사용할까?

여기서 핵심은 한 페이지에서 저장한 데이터를 같은 출처(origin)의 다른 페이지에서도 사용할 수 있다는 것입니다.

예를 들어 웹사이트에서 공통으로 사용하는 경기 목록이나 설정 정보를 서버에서 가져왔다고 가정해보겠습니다.

첫 번째 페이지에서 데이터를 조회한 다음 localStorage에 저장합니다.

const data = {
    date: "2026-09-09",
    items: ["경기1", "경기2", "경기3"]
};

localStorage.setItem("gameData", JSON.stringify(data));

이후 다른 페이지에서는 서버에 다시 요청하지 않고 저장된 데이터를 가져올 수 있습니다.

const data = JSON.parse(
    localStorage.getItem("gameData")
);

console.log(data);

이렇게 구성하면 여러 페이지가 하나의 브라우저 저장 데이터를 함께 사용할 수 있습니다.

그래서 흔히 localStorage 공유캐시라는 식으로 표현할 수 있습니다.

캐시를 사용하면 어떤 점이 좋아질까?

가장 먼저 생각할 수 있는 장점은 불필요한 서버 요청을 줄일 수 있다는 것입니다.

사용자가 페이지를 이동할 때마다 동일한 데이터를 서버에서 다시 받아온다면 네트워크 요청이 계속 발생합니다.

데이터의 양이 많거나 서버 응답 시간이 긴 경우에는 사용자가 화면을 기다려야 하는 시간도 길어질 수 있습니다.

반면 이미 가져온 데이터를 브라우저에 저장해두었다가 재사용하면 상황이 달라집니다.

첫 번째 요청에서는 서버에서 데이터를 가져오지만, 이후에는 캐시에 저장된 데이터를 먼저 확인하고 사용할 수 있습니다.

결과적으로 서버 요청 횟수를 줄이고 화면을 더 빠르게 구성할 수 있는 여지가 생깁니다.

특히 자주 변경되지 않는 설정 정보나 공통 코드, 목록 데이터 등을 다룰 때 유용하게 사용할 수 있습니다.

그런데 localStorage에 무조건 데이터를 저장하면 될까?

그렇지는 않습니다.

캐시는 어디까지나 원본 데이터를 빠르게 재사용하기 위한 임시 저장소라는 관점에서 접근하는 것이 좋습니다.

가장 큰 문제는 데이터가 오래된 상태로 남을 수 있다는 것입니다.

예를 들어 서버의 데이터가 오전 10시에 변경되었는데 브라우저의 localStorage에는 오전 9시에 저장한 데이터가 남아 있다고 해보겠습니다.

사용자가 페이지를 열었을 때 캐시 데이터만 사용한다면 최신 데이터가 아니라 이전 데이터를 보여주게 됩니다.

그래서 공유캐시를 구현할 때는 캐시 만료 시간을 함께 관리하는 것이 중요합니다.

만료 시간을 함께 저장하는 방법

단순히 데이터만 저장하는 것보다 저장 시간까지 함께 기록하는 방식이 실용적입니다.

const cacheData = {
    savedAt: Date.now(),
    data: {
        name: "홍길동",
        age: 30
    }
};

localStorage.setItem(
    "userCache",
    JSON.stringify(cacheData)
);

그리고 데이터를 사용할 때 저장된 시간을 확인합니다.

예를 들어 10분 동안만 캐시를 사용한다고 정했다면 다음과 같은 방식으로 판단할 수 있습니다.

const CACHE_TIME = 10 * 60 * 1000;

const cached = localStorage.getItem("userCache");

if (cached) {
    const parsed = JSON.parse(cached);

    if (Date.now() - parsed.savedAt < CACHE_TIME) {
        console.log("캐시 사용");
    } else {
        console.log("캐시 만료");
    }
}

이렇게 하면 무조건 localStorage의 데이터를 사용하는 것이 아니라 유효한 데이터일 때만 캐시를 사용하는 구조를 만들 수 있습니다.

여러 페이지에서 공유할 때 주의할 점

localStorage 공유캐시를 구현할 때는 몇 가지 주의할 부분이 있습니다.

먼저 동일한 출처에서 사용하는 저장소라는 점을 이해해야 합니다. 프로토콜, 호스트, 포트 등이 달라지면 같은 localStorage를 그대로 공유할 수 없는 경우가 있습니다.

또한 localStorage에는 객체나 배열을 그대로 저장할 수 없습니다.

JavaScript 객체를 저장하려면 일반적으로 JSON.stringify()를 사용하고, 다시 사용할 때 JSON.parse()로 원래 데이터 형태로 변환합니다.

localStorage.setItem(
    "items",
    JSON.stringify(["A", "B", "C"])
);

const items = JSON.parse(
    localStorage.getItem("items")
);

그리고 저장 공간에도 한계가 있기 때문에 대용량 데이터를 무작정 저장하는 방식은 적절하지 않습니다.

localStorage에 중요한 정보를 저장해도 될까?

이 부분은 특히 주의해야 합니다.

localStorage는 편리하지만 보안 저장소라고 생각하면 안 됩니다.

비밀번호, 인증 토큰, 개인정보처럼 보안이 중요한 데이터를 단순히 localStorage에 저장하는 것은 신중하게 판단해야 합니다.

웹페이지의 JavaScript에서 접근할 수 있는 저장소이기 때문에 XSS와 같은 보안 문제가 발생했을 때 저장된 정보가 노출될 가능성을 고려해야 합니다.

따라서 localStorage는 캐싱이나 사용자 편의 설정 등 적절한 용도의 데이터에 사용하는 것이 좋습니다.

localStorage 공유캐시를 사용할 때 가장 중요한 것

결국 핵심은 “한 번 가져온 데이터를 계속 사용한다”가 아닙니다.

언제 저장하고, 언제 읽으며, 언제 버릴 것인지를 정하는 것이 더 중요합니다.

예를 들어 다음과 같은 흐름으로 설계할 수 있습니다.

1. 페이지에서 필요한 데이터를 확인한다.
2. localStorage에 캐시가 있는지 확인한다.
3. 캐시가 존재하고 아직 유효하다면 캐시를 사용한다.
4. 캐시가 없거나 만료되었다면 서버에서 최신 데이터를 가져온다.
5. 새로운 데이터를 localStorage에 저장한다.
6. 이후 다른 페이지에서는 동일한 캐시를 재사용한다.

이런 구조를 만들어두면 여러 페이지에서 동일한 데이터를 사용하는 웹사이트를 조금 더 효율적으로 구성할 수 있습니다.

마무리

localStorage 공유캐시는 특별히 복잡한 기술은 아닙니다.

하지만 웹 개발에서 반복되는 서버 요청을 줄이고 페이지 간 데이터를 재사용해야 할 때 상당히 유용한 방법이 될 수 있습니다.

특히 자주 변경되지 않는 데이터라면 매번 서버에 요청하는 것보다 브라우저에 잠시 저장해두고 재사용하는 방식이 효율적일 수 있습니다.

다만 캐시는 오래된 데이터를 가지고 있을 수 있다는 문제가 있기 때문에 만료 시간, 데이터 갱신 시점, 저장 용량, 보안 문제 등을 함께 고려해야 합니다.

처음 구현한다면 복잡한 캐시 시스템부터 만들기보다는 localStorage.setItem()과 localStorage.getItem()을 이용해 간단한 구조부터 만들어보는 것을 추천합니다.

그리고 데이터에 savedAt 같은 저장 시간을 함께 넣어두면 캐시의 유효기간을 관리하기가 훨씬 쉬워집니다.

결국 localStorage 공유캐시의 핵심은 간단합니다.

“이미 가져온 데이터를 적절한 기간 동안 브라우저에 보관하고, 필요한 페이지에서 다시 사용하는 것.”

이 기본 원리만 이해해도 여러 페이지에서 반복적으로 발생하는 데이터 조회를 줄이고, 웹사이트의 체감 속도를 개선하는 데 활용할 수 있습니다.