JavaScript LocalStorage 활용법: 웹 앱 상태 관리 비법

작성일 : 2024-08-01

JavaScript LocalStorage 활용법: 웹 앱 상태 관리 비법

웹 개발에서 중요한 것 중 하나는 사용자 상태를 효율적으로 관리하는 것입니다. 특히 SPA(Single Page Application)와 같은 복잡한 웹 앱에서는 사용자가 페이지를 새로고침해도 데이터가 사라지지 않게 하는 것이 중대한 과제입니다. 이 문제를 해결하기 위해 JavaScript의 localStorage를 활용할 수 있습니다. 이 글에서는 localStorage의 기본 개념부터 실제 적용 방법까지 다루도록 하겠습니다.

LocalStorage란 무엇인가?

localStorage는 웹 브라우저에 데이터를 영구적으로 저장하기 위해 사용되는 클라이언트 측 스토리지입니다. 이것은 HTML5의 일부로 도입되었으며, 다음과 같은 특징을 갖고 있습니다:

키-값 쌍(Key-Value Pairs): localStorage는 문자열 형태의 키와 값을 저장할 수 있습니다.
영구적 저장소: 사용자가 브라우저를 종료하거나 컴퓨터를 재부팅해도 데이터가 사라지지 않습니다.
도메인별 저장: 동일한 도메인과 프로토콜을 공유하는 페이지들에서만 접근할 수 있습니다.
용량 제한: 일반적으로 5MB 정도의 용량 제한이 있습니다.

LocalStorage 기본 사용법

localStorage를 사용하는 방법은 매우 간단합니다. 주요 메서드로는 setItem, getItem, removeItem, clear가 있습니다. 각 메서드의 사용법을 살펴보겠습니다.

데이터 저장하기


javascript
// 키-값 쌍으로 데이터 저장
localStorage.setItem('username', 'john_doe');

데이터 불러오기


javascript
// 키를 사용해서 데이터 불러오기
const username = localStorage.getItem('username');
console.log(username); // 출력: john_doe

데이터 삭제하기


javascript
// 특정 키의 데이터 삭제
localStorage.removeItem('username');

모든 데이터 삭제하기


javascript
// 모든 로컬스토리지 데이터 삭제
localStorage.clear();

실습: 웹 앱 상태 관리

지금까지 localStorage의 기본 사용법을 배웠으니, 이를 활용하여 간단한 웹 애플리케이션 상태 관리를 구현해봅시다. 예제 앱은 사용자가 입력한 할 일 목록을 저장하고, 페이지를 새로고침해도 목록이 유지되도록 하는 기능을 갖고 있습니다.

HTML 코드

먼저 HTML 파일을 구성합니다:


html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>To-Do List</title>
</head>
<body>
  <h1>To-Do List</h1>
  <input type="text" id="todoInput" placeholder="Enter a new task">
  <button onclick="addTodo()">Add</button>
  <ul id="todoList"></ul>
  <script src="app.js"></script>
</body>
</html>

JavaScript 코드

다음으로 JavaScript 파일(app.js)을 작성합니다:


javascript
// HTML 요소 선택
const todoInput = document.getElementById('todoInput');
const todoList = document.getElementById('todoList');

// 저장된 할 일 목록 불러오기
document.addEventListener('DOMContentLoaded', () => {
  const todos = JSON.parse(localStorage.getItem('todos')) || [];
  todos.forEach(todo => {
    const li = document.createElement('li');
    li.textContent = todo;
    todoList.appendChild(li);
  });
});

// 할 일 추가 함수
function addTodo() {
  const todoText = todoInput.value;
  if (todoText === '') return;

  const li = document.createElement('li');
  li.textContent = todoText;
  todoList.appendChild(li);

  // 로컬 스토리지에 저장
  const todos = JSON.parse(localStorage.getItem('todos')) || [];
  todos.push(todoText);
  localStorage.setItem('todos', JSON.stringify(todos));
  
  todoInput.value = '';
}

이제 브라우저에서 이 HTML 파일을 열고, 텍스트를 입력한 뒤 'Add' 버튼을 클릭하면 할 일이 추가됩니다. 페이지를 새로고침해도 목록이 유지되는 것을 확인할 수 있습니다.

로컬 스토리지의 한계와 대안

localStorage는 간단한 상태 관리에 매우 유용하지만, 몇 가지 한계가 있습니다:

보안 문제: 데이터를 암호화하지 않은 상태로 저장하기 때문에 민감한 정보를 저장하는 데에는 부적합합니다.
용량 제한: 용량이 제한적이기 때문에 대량의 데이터를 저장할 수 없습니다.
동기화 문제: 여러 탭이나 창에서 동기화가 필요한 경우에는 복잡할 수 있습니다.

이러한 한계를 극복하려면 SessionStorage, IndexedDB, 혹은 서버측 스토리지와의 조합을 고려해볼 수 있습니다. 예를 들어, 사용자 인증 정보는 서버측 JWT(Json Web Token)와 같은 기법을 활용하여 저장하고, 그 외의 임시 상태는 localStorage나 SessionStorage를 사용하는 전략을 취할 수 있습니다.

결론

localStorage는 웹 애플리케이션의 상태를 영구적으로 관리하는 데 있어 매우 간단하고 강력한 도구입니다. 특히 간단한 데이터 저장 및 복원 작업에는 매우 유용하지만, 보안 및 용량 측면에서 한계를 갖고 있으므로 주의해야 합니다. 이 글에서 제공한 기본 사용법과 예제 코드가 실제 프로젝트에서 localStorage를 활용하는 데 도움이 되길 바랍니다.