자바스크립트를 이용한 브라우저 북마크 추가/제거

13 Oct 2023

개요

브라우저의 북마크 기능은 웹 페이지에 저장된 중요한 링크를 편리하게 접근할 수 있도록 도와줍니다. 이번 글에서는 자바스크립트를 사용하여 브라우저 북마크를 추가하고 제거하는 방법을 알아보겠습니다.

북마크 추가

자바스크립트를 사용하여 브라우저 북마크를 추가할 때는 window 객체의 localStorage 속성을 활용할 수 있습니다. 아래는 북마크를 추가하는 예시 코드입니다.

function addBookmark() {
  var pageTitle = document.title;
  var pageUrl = window.location.href;

  if (window.localStorage) {
    // localStorage 지원 브라우저에서만 북마크를 추가합니다.
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];

    // 새로운 북마크 객체를 생성하고 저장합니다.
    var bookmark = {
      title: pageTitle,
      url: pageUrl
    };
    bookmarks.push(bookmark);

    // 업데이트된 북마크 리스트를 저장합니다.
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  } else {
    // localStorage를 지원하지 않는 브라우저에서는 알림을 표시합니다.
    alert('이 브라우저는 북마크를 지원하지 않습니다.');
  }
}

위 코드에서 addBookmark 함수를 호출하면 현재 페이지의 제목과 URL 정보를 가져와서 localStorage에 저장합니다. 만약 localStorage를 지원하지 않는 브라우저라면 알림을 표시합니다.

북마크 제거

북마크를 제거하기 위해서는 localStorage에서 특정 북마크를 찾아서 삭제하는 과정이 필요합니다. 아래는 북마크를 제거하는 예시 코드입니다.

function removeBookmark(url) {
  if (window.localStorage) {
    var bookmarks = JSON.parse(localStorage.getItem('bookmarks')) || [];

    // `url`과 일치하는 북마크를 찾아서 삭제합니다.
    bookmarks = bookmarks.filter(function (bookmark) {
      return bookmark.url !== url;
    });

    // 업데이트된 북마크 리스트를 저장합니다.
    localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
  }
}

위 코드에서 removeBookmark 함수를 호출할 때 삭제하고자 하는 북마크의 URL을 전달합니다. 해당 URL과 일치하는 북마크를 찾아서 localStorage에서 삭제합니다.

참고 자료

브라우저에서 자바스크립트를 사용하여 북마크를 추가하고 제거하는 방법을 알아보았습니다. 만약 localStorage를 사용하지 않는 다른 방식으로 북마크를 처리하고 싶다면, 다른 브라우저 API나 서드파티 라이브러리를 고려해보세요.

목차

개요

북마크 추가

북마크 제거

참고 자료