자바스크립트 Local Storage를 활용한 플러그인 개발

15 Sep 2023

javascript

서론

플러그인은 웹 개발에서 많이 사용되는 개념 중 하나입니다. 이번에는 자바스크립트의 Local Storage를 활용하여 간단한 플러그인을 개발하는 방법에 대해 알아보겠습니다. Local Storage는 웹 브라우저에 데이터를 저장하는 기능을 제공하여 사용자의 데이터를 유지할 수 있게 해줍니다.

Local Storage란?

Local Storage는 HTML5에서 도입된 웹 스토리지 기술입니다. 웹 브라우저에 키와 값의 쌍으로 데이터를 저장할 수 있는 영구적인 저장 공간을 제공합니다. 데이터는 사이트나 세션이 종료되어도 계속해서 유지됩니다. 또한, 저장된 데이터는 웹 페이지 전체에서 접근할 수 있으므로 여러 페이지에서 공유하여 사용할 수 있습니다.

플러그인 개발하기

간단한 예시로 To-Do 리스트 플러그인을 개발해보겠습니다.

1. HTML 구조 만들기

먼저, 플러그인이 동작할 HTML 구조를 만들어야 합니다. 다음과 같은 구조를 가진 HTML을 작성해주세요.

<div id="todo-container">
  <input id="todo-input" type="text" placeholder="할 일을 입력하세요">
  <button id="todo-add-btn">추가</button>
  <ul id="todo-list"></ul>
</div>

2. 자바스크립트 로직 만들기

다음으로, 자바스크립트를 사용하여 플러그인의 동작 로직을 작성해야 합니다. 아래 코드는 입력한 할 일을 Local Storage에 저장하고, 저장된 할 일을 화면에 보여주는 기능을 가진 플러그인입니다.

(function() {
  // Local Storage에 저장된 할 일 불러오기
  function loadTodos() {
    const todos = localStorage.getItem('todos');
    if (todos) {
      const todoList = document.getElementById('todo-list');
      todoList.innerHTML = todos;
    }
  }

  // 할 일 추가하기
  function addTodo() {
    const input = document.getElementById('todo-input');
    const todo = input.value;
    if (todo) {
      const todoList = document.getElementById('todo-list');
      const newTodoItem = document.createElement('li');
      newTodoItem.innerText = todo;
      todoList.appendChild(newTodoItem);

      // Local Storage에 할 일 저장하기
      const todos = todoList.innerHTML;
      localStorage.setItem('todos', todos);

      input.value = '';
    }
  }

  // 초기화 함수
  function init() {
    const addButton = document.getElementById('todo-add-btn');
    addButton.addEventListener('click', addTodo);
    loadTodos();
  }

  // 플러그인 초기화
  window.addEventListener('DOMContentLoaded', init);
})();

3. 플러그인 사용하기

위의 코드를 스크립트 태그로 작성하고, HTML에서 스크립트를 불러와 플러그인을 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="UTF-8">
  <title>플러그인 테스트</title>
  <script src="todo-plugin.js"></script>
</head>
<body>
  <h1>할 일 목록</h1>
  <div id="todo-container">
    <input id="todo-input" type="text" placeholder="할 일을 입력하세요">
    <button id="todo-add-btn">추가</button>
    <ul id="todo-list"></ul>
  </div>
</body>
</html>

마무리

이처럼 자바스크립트의 Local Storage를 활용하여 플러그인을 개발할 수 있습니다. Local Storage를 이용하면 웹 브라우저에 데이터를 저장하여 사용자의 정보를 유지할 수 있습니다. 웹 개발에서 플러그인은 상황에 맞게 사용자 경험을 향상시키는데 유용한 도구입니다.