자바스크립트 Local Storage를 이용한 웹 사이트 북마크 기능 구현

15 Sep 2023

javascript

오늘 우리는 자바스크립트의 Local Storage를 사용하여 웹 사이트 북마크 기능을 구현하는 방법을 알아보려 합니다. 북마크 기능은 사용자가 웹 페이지를 즐겨찾기로 저장할 수 있는 기능으로, 다시 방문할 때 편리하게 접근할 수 있도록 도와줍니다.

Local Storage란?

Local Storage는 웹 브라우저에 데이터를 저장하는 데 사용되는 웹 기술입니다. 이 기능은 사용자의 로컬 컴퓨터에 데이터를 저장하여 웹 페이지의 세션과 무관하게 데이터를 유지할 수 있습니다. 이는 브라우저가 종료되어도 데이터가 사라지지 않고 계속 이용할 수 있다는 장점이 있습니다.

웹 사이트 북마크 기능 구현 방법

HTML 파일에서 북마크 버튼과 북마크 리스트를 표시할 요소를 추가합니다.

<button id="bookmark-button">북마크</button>
<ul id="bookmark-list"></ul>

자바스크립트 파일에 북마크 기능을 구현하는 코드를 작성합니다.

document.getElementById('bookmark-button').addEventListener('click', function() {
  var bookmarkUrl = window.location.href;
  var bookmarkTitle = document.title;

  // Local Storage에 북마크 데이터 추가
  var bookmark = {
    url: bookmarkUrl,
    title: bookmarkTitle
  };

  var bookmarks = localStorage.getItem('bookmarks');
  if (bookmarks === null) {
    bookmarks = [];
  } else {
    bookmarks = JSON.parse(bookmarks);
  }

  bookmarks.push(bookmark);

  localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
});

function displayBookmarks() {
  var bookmarks = localStorage.getItem('bookmarks');
  if (bookmarks !== null) {
    bookmarks = JSON.parse(bookmarks);
    var bookmarkList = document.getElementById('bookmark-list');

    // 기존 북마크 리스트 초기화
    while (bookmarkList.firstChild) {
      bookmarkList.removeChild(bookmarkList.firstChild);
    }

    // Local Storage에서 북마크 데이터를 가져와 리스트에 추가
    for (var i = 0; i < bookmarks.length; i++) {
      var bookmark = bookmarks[i];
      var listItem = document.createElement('li');
      var link = document.createElement('a');
      link.href = bookmark.url;
      link.textContent = bookmark.title;
      listItem.appendChild(link);
      bookmarkList.appendChild(listItem);
    }
  }
}

displayBookmarks();

기능 설명

북마크 버튼 클릭 시 해당 페이지의 URL과 제목을 Local Storage에 저장합니다.
Local Storage에 저장된 북마크 데이터는 배열 형태로 저장되며, JSON 형식으로 변환하여 저장합니다.
페이지가 로드될 때마다 Local Storage에서 북마크 데이터를 가져와서 북마크 리스트에 표시합니다. 이때, 기존의 북마크 리스트는 초기화됩니다.

이제 웹 사이트에 북마크 기능이 구현되었습니다. 사용자는 북마크 버튼을 클릭하여 현재 페이지를 북마크로 저장할 수 있으며, 북마크 리스트를 통해 저장한 페이지로 간편하게 접근할 수 있습니다.

#javascript #localstorage