로컬스토리지 사용방법: 저장, 수정, 삭제

로컬스토리지 사용방법: 저장, 수정, 삭제

로컬스토리지(LocalStorage)는 웹 브라우저에서 데이터를 클라이언트 측에 영구적으로 저장할 수 있는 기능입니다. 이 기능은 페이지가 새로고침되거나 브라우저가 닫혀도 데이터가 유지된다는 장점이 있습니다. 이번 글에서는 로컬스토리지의 저장, 수정, 삭제 방법을 중심으로 설명하겠습니다.

로컬스토리지의 주요 특징

• 데이터 영구성: 브라우저 종료 후에도 데이터가 유지됩니다.
• 문자열 형식: 모든 데이터는 문자열로 저장되며, 객체나 배열은 JSON 형식으로 변환해야 합니다.
• 5MB 용량 제한: 각 도메인당 약 5MB의 데이터를 저장할 수 있습니다.
• 도메인 기반: 동일한 도메인 내에서만 데이터가 공유됩니다.

 

1. 로컬스토리지 기본 메서드

1.1 데이터 저장하기

로컬스토리지에 데이터를 저장하려면 setItem() 메서드를 사용합니다. 이 메서드는 두 개의 인자(키와 값)를 받아 데이터를 저장합니다.

localStorage.setItem('username', 'JohnDoe');

1.2 데이터 읽기

저장된 데이터를 불러오려면 getItem() 메서드를 사용합니다.

const username = localStorage.getItem('username');
console.log(username);  // 출력: JohnDoe

1.3 데이터 삭제

특정 키에 해당하는 데이터를 삭제하려면 removeItem() 메서드를 사용합니다.

localStorage.removeItem('username');

1.4 모든 데이터 삭제

로컬스토리지에 저장된 모든 데이터를 삭제하려면 clear() 메서드를 사용합니다.

localStorage.clear();

2. 로컬스토리지 수정하기

로컬스토리지는 값을 덮어쓰는 방식으로 수정됩니다. 즉, 특정 키에 새로운 값을 설정하면 기존 값이 덮어씌워집니다.

2.1 간단한 값 수정

다음은 기존에 저장된 값을 새로운 값으로 수정하는 예시입니다.

localStorage.setItem('username', 'JaneDoe');

2.2 객체나 배열 수정

객체나 배열과 같은 복잡한 데이터 구조를 수정하려면 먼저 데이터를 불러와 수정한 후 다시 저장해야 합니다.

let user = JSON.parse(localStorage.getItem('user'));
user.age = 31;
localStorage.setItem('user', JSON.stringify(user));

3. 로컬스토리지 활용 예제

아래는 간단한 HTML과 JavaScript를 이용해 로컬스토리지를 사용하는 예제입니다.

<input type="text" id="inputData" placeholder="데이터 입력">
<button onclick="saveData()">저장하기</button>
<button onclick="loadData()">불러오기</button>
<button onclick="modifyData()">수정하기</button>
<button onclick="deleteData()">삭제하기</button>

<script>
    function saveData() {
        const data = document.getElementById('inputData').value;
        localStorage.setItem('myData', data);
        alert('데이터가 저장되었습니다.');
    }

    function loadData() {
        const data = localStorage.getItem('myData');
        if (data) {
            alert('저장된 데이터: ' + data);
        } else {
            alert('저장된 데이터가 없습니다.');
        }
    }

    function modifyData() {
        const newData = prompt('수정할 데이터를 입력하세요:', localStorage.getItem('myData'));
        if (newData !== null) {
            localStorage.setItem('myData', newData);
            alert('데이터가 수정되었습니다.');
        }
    }

    function deleteData() {
        localStorage.removeItem('myData');
        alert('데이터가 삭제되었습니다.');
    }
</script>

Q&A

Q1: 로컬스토리지는 모든 브라우저에서 지원되나요?

대부분의 최신 브라우저에서 지원됩니다. 다만 오래된 버전에서는 지원되지 않을 수 있으므로 호환성을 확인하는 것이 좋습니다.

Q2: 로컬스토리지는 얼마나 많은 데이터를 저장할 수 있나요?

각 도메인당 약 5MB의 데이터를 저장할 수 있습니다.

Q3: 로컬스토리지는 보안상 안전한가요?

로컬스토리지는 클라이언트 측에 저장되므로 민감한 정보를 직접적으로 저장하는 것은 권장되지 않습니다. 암호화 등의 추가적인 보안 조치를 취하는 것이 좋습니다.

결론

로컬스토리지는 웹 애플리케이션에서 클라이언트 측 데이터를 영구적으로 보관하는 데 매우 유용한 도구입니다. 특히 사용자 설정이나 상태 정보를 유지해야 하는 경우 유용하게 사용할 수 있습니다. 하지만 보안 문제를 고려해 민감한 정보는 별도의 보호 장치를 마련하거나 서버 측에서 관리하는 것이 좋습니다.