[JavaScript] localStorage의 개념 및 사용방법

웹 개발에서 데이터를 클라이언트 측에 저장하는 방법은 여러 가지가 있다. 그 중 하나가 바로 localStorage이다. 웹 페이지가 닫히거나 리로드되더라도 데이터가 지워지지 않는 클라이언트 측에서 사용하는 저장소를 말한다. 이 기능은 웹 페이지의 세션 동안 (즉, 브라우저 탭이 열려 있는 동안) 데이터를 저장하는 sessionStorage와는 대조적이다. localStorage는 단순히 데이터를 저장하는 것에서부터, 사용자의 환경 설정, 장바구니 정보 등 다양한 용도로 활용된다. 이 글에서는 localStorage의 특징, 사용 방법, 주의사항 등을 이해할 수 있도록 자세하게 설명할 것이다.

localStorage란?

localStorage는 웹 페이지의 세션 간에 키-값 쌍을 저장할 수 있게 해주는 웹 스토리지 솔루션이다.

이는 웹 애플리케이션에서 데이터를 영구적으로 저장할 수 있게 하여, 사용자 경험을 향상시키는 데 중요한 역할을 한다. 이 데이터는 사용자의 브라우저에 저장되므로 서버에 반복적인 요청 없이 쉽게 접근할 수 있다.

localStorage의 특징

영구적인 저장소

로컬스토리지에 저장된 데이터는 만료 날짜가 없으며, 사용자가 직접 삭제하거나 웹 애플리케이션에서 데이터를 삭제하는 경우에만 제거된다. 이는 세션스토리지와 대조적으로, 세션스토리지는 웹 페이지 세션이 종료될 때 데이터가 자동으로 삭제된다.

저장 용량

로컬스토리지의 용량은 대부분의 브라우저에서 5MB~10MB로 제한되어 있다. 하지만 이는 브라우저마다 약간의 차이가 있을 수 있다. 이 용량은 쿠키의 4KB 제한보다 훨씬 큰 용량이다.

도메인 및 프로토콜 제한

로컬스토리지는 같은 도메인 및 프로토콜에서만 접근이 가능하다. 이는 보안 목적으로, 다른 도메인이나 프로토콜에서 로컬스토리지에 저장된 데이터에 접근하는 것을 방지하기 위함이다.

localStorage 사용 방법

데이터 저장하기

웹 애플리케이션에서 사용자의 정보나 환경 설정 등의 데이터를 지속적으로 보존하는 것은 중요하다. 이때 localStorage는 완벽한 해결책 중 하나로, 사용자의 브라우저 내에 키-값 쌍의 데이터 형태로 정보를 저장할 수 있다. 이 데이터는 웹 페이지의 세션 간에도 유지되며, 페이지를 새로 고침하거나 브라우저를 재시작해도 손실되지 않는다.

JavaScript의 localStorage 객체를 사용하여 데이터를 저장하는 방법은 아래와 같다.

localStorage.setItem('key', 'value');

setItem 메소드는 첫 번째 인자로 데이터의 식별자로 사용될 키의 이름을, 그리고 두 번째 인자로 실제 저장할 값을 받다. 이렇게 저장된 데이터는 브라우저를 종료해도 보존된다.

데이터 불러오기

데이터가 localStorage에 저장되었다면, 해당 데이터는 필요할 때 언제든지 불러와 사용할 수 있다. 데이터를 불러오기 위해선 해당 데이터의 키를 알고 있어야 한다.

let data = localStorage.getItem('key');
console.log(data);

getItem 메소드는 키를 인자로 받아서 그에 해당하는 값을 반환한다. 만약 해당 키에 연결된 값이 없다면 null을 반환한다.

데이터 삭제하기

데이터 저장소에서 정보를 관리하면서, 불필요한 정보나 오래된 정보를 삭제하는 것은 흔한 작업이다. localStorage에서 특정 키에 대응하는 데이터를 삭제하고자 할 때는 다음과 같이 수행한다.

localStorage.removeItem('key');

removeItem 메소드는 지정된 키에 해당하는 데이터를 삭제한다. 만약 삭제하려는 키가 존재하지 않으면 어떤 작업도 수행되지 않는다.

모든 데이터 삭제하기

애플리케이션의 특정 시점에서 localStorage에 저장된 모든 데이터를 일괄 삭제해야 할 수도 있다. 이때 사용하는 메소드는 아래와 같다.

localStorage.clear();

clear 메소드는 localStorage에 있는 모든 데이터를 한 번에 삭제한다. 이 메소드는 주의해서 사용해야 합니다, 왜냐하면 한 번 실행하면 복구할 수 없는 데이터 손실이 발생할 수 있기 때문이다.

localStorage 사용사례

localStorage는 다양한 웹 애플리케이션에서 유용하게 사용되고 있다. 아래는 로컬스토리지의 활용을 보여주는 세 가지 구체적인 사용사례이다.

1. 사용자 설정 유지

웹사이트나 웹 애플리케이션에서 사용자가 개인화한 설정을 기억하기 위해 localStorage를 활용할 수 있다. 예를 들어, 웹 사이트에서 제공하는 다크 모드/라이트 모드 설정, 폰트 크기, 언어 선택 등의 사용자 설정을 localStorage에 저장하여 사용자가 다음 번 방문했을 때 같은 환경을 제공할 수 있다.

// 사용자의 설정 저장
function saveUserSettings(theme, fontSize, language) {
    localStorage.setItem('theme', theme);
    localStorage.setItem('fontSize', fontSize);
    localStorage.setItem('language', language);
}

// 저장된 설정 불러오기
function loadUserSettings() {
    const theme = localStorage.getItem('theme');
    const fontSize = localStorage.getItem('fontSize');
    const language = localStorage.getItem('language');
    // 해당 설정을 웹 페이지에 적용하는 코드 추가
}

2. 장바구니 데이터 저장

온라인 쇼핑몰에서 사용자가 장바구니에 추가한 상품을 로컬스토리지에 임시로 저장하여, 사용자가 사이트를 나갔다가 다시 방문했을 때 이전에 추가한 상품들을 장바구니에 유지할 수 있다.

// 상품을 장바구니에 추가
function addToCart(product) {
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    cart.push(product);
    localStorage.setItem('cart', JSON.stringify(cart));
}

// 장바구니의 상품 불러오기
function getCartItems() {
    return JSON.parse(localStorage.getItem('cart')) || [];
}

3. 게임의 진행 상황 저장

웹 기반 게임에서 플레이어의 진행 상황, 점수, 설정 등을 localStorage에 저장하여, 플레이어가 게임을 다시 시작할 때 이전에 달성한 진행 상황을 로드할 수 있게 한다.

// 게임 진행 상황 저장
function saveGameProgress(progress, score) {
    localStorage.setItem('gameProgress', progress);
    localStorage.setItem('gameScore', score);
}

// 저장된 게임 진행 상황 불러오기
function loadGameProgress() {
    const progress = localStorage.getItem('gameProgress');
    const score = localStorage.getItem('gameScore');
    // 해당 진행 상황과 점수를 게임에 적용하는 코드 추가
}

이렇게 localStorage는 사용자 경험을 향상시키는 다양한 방법으로 웹 애플리케이션에서 활용될 수 있다.

localStorage의 주의사항

웹 개발을 하면서 localStorage는 매우 유용한 도구로 사용되곤 한다. 그러나 올바르게 사용하려면 몇 가지 주의사항을 알아두어야 한다.

저장 용량 제한

localStorage는 저장 용량에 한계가 있다. 대부분의 브라우저에서는 5MB~10MB의 데이터만 저장할 수 있다. 그러므로 대용량의 데이터를 저장하기에는 부적절하며, 필요한 경우 다른 저장 방법을 고려해야 한다.

데이터 보안

• localStorage에 저장된 데이터는 암호화되지 않는다. 따라서 민감한 개인정보나 중요한 데이터를 저장하는 것은 권장되지 않는다.
• XSS(크로스 사이트 스크립팅) 공격과 같은 보안 위협이 있다. 악의적인 스크립트가 웹사이트에 삽입될 경우, localStorage의 데이터에 접근이 가능하므로 주의해야 한다.

문자열 저장만 가능

localStorage는 오직 문자열만 저장할 수 있다. 따라서 객체나 배열 등의 데이터 구조를 그대로 저장하려면 JSON.stringify() 함수로 문자열로 변환한 후 저장해야 한다. 이후 데이터를 사용할 때는 JSON.parse()를 통해 원래의 데이터 구조로 변환해야 한다.

동기적 동작

localStorage의 동작은 동기적이다. 즉, localStorage와 관련된 작업이 진행되는 동안 웹 애플리케이션의 다른 작업들은 일시 중지된다. 따라서 빈번하게 데이터를 조회하거나 큰 데이터를 처리할 때 애플리케이션의 성능에 영향을 줄 수 있다.

브라우저 지원

대부분의 현대 브라우저는 localStorage를 지원한다. 그러나 아주 오래된 브라우저나 일부 특정 브라우저에서는 지원하지 않을 수 있다. 따라서 대상 사용자의 브라우저 지원 범위를 파악하고, 필요한 경우 폴리필(polyfill) 등의 방법을 고려해야 한다.

도메인 및 프로토콜 제한

localStorage는 웹 페이지의 도메인과 프로토콜에 따라 고유하게 분리된다. 따라서 http와 https 프로토콜 또는 서로 다른 도메인 간에는 localStorage 데이터를 공유할 수 없다.

이러한 주의사항들은 로컬스토리지를 사용하면서 데이터의 무결성, 보안, 그리고 애플리케이션의 성능을 유지하기 위해 반드시 고려해야 한다.

localStorage는 웹 개발에서 클라이언트 측 데이터 저장에 효율적인 방법으로 널리 사용되고 있다. 그러나 이를 활용하면서 그 특징과 장단점을 정확히 알고, 보안과 관련된 주의사항 등을 반드시 숙지해야 한다. 특히 민감한 정보의 저장에는 주의가 필요하며, 대용량 데이터의 처리나 빠른 처리가 요구되는 경우에는 다른 대안을 찾아야 할 수도 있다. 웹 애플리케이션의 효율성과 사용자 경험을 높이기 위해 localStorage의 올바른 활용 방법을 마스터하는 것은 모든 웹 개발자에게 중요한 스킬 중 하나이다.