В этой статье блога мы рассмотрим пять различных способов создания кнопки закладок для веб-страниц. Кнопки закладок позволяют пользователям быстро сохранять и получать доступ к любимому веб-контенту, что позволяет им удобно повторно посещать интересующие страницы. Мы предоставим примеры кода для каждого метода, чтобы помочь вам легко реализовать функцию создания закладок. Давайте начнем!

Метод 1. Использование JavaScript localStorage API
Пример кода:

<button onclick="bookmarkPage()">Bookmark this Page</button>
<script>
function bookmarkPage() {
  localStorage.setItem("bookmark", window.location.href);
  alert("Page bookmarked!");
}
</script>

Метод 2: использование файлов cookie
Пример кода:

<button onclick="bookmarkPage()">Bookmark this Page</button>
<script>
function bookmarkPage() {
  document.cookie = "bookmark=" + window.location.href + "; expires=Thu, 31 Dec 2026 23:59:59 UTC; path=/";
  alert("Page bookmarked!");
}
</script>

Метод 3. Реализация серверного решения с помощью PHP
Пример кода:

<?php
if(isset($_POST['bookmark'])) {
  file_put_contents("bookmarks.txt", $_POST['bookmark'] . PHP_EOL, FILE_APPEND);
  echo "Page bookmarked!";
}
?>
<form method="post" action="">
  <input type="hidden" name="bookmark" value="<?php echo htmlspecialchars($_SERVER['REQUEST_URI']); ?>">
  <button type="submit">Bookmark this Page</button>
</form>

Метод 4. Использование расширений браузера
Пример кода:
Создайте расширение браузера с помощью таких платформ, как Chrome Extension API или Firefox WebExtension API. Расширение может предоставить кнопку, при нажатии которой текущий URL-адрес веб-страницы сохраняется в хранилище расширения. Вот общий пример того, как это можно сделать:

// Chrome Extension API
chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.storage.sync.get('bookmarks', function(data) {
    if (!Array.isArray(data.bookmarks)) {
      data.bookmarks = [];
    }
    data.bookmarks.push(tab.url);
    chrome.storage.sync.set({ bookmarks: data.bookmarks }, function() {
      alert('Page bookmarked!');
    });
  });
});

Метод 5: реализация API закладок
Пример кода:
Изучите существующие API закладок, такие как Pocket API или API закладок для конкретных браузеров. Эти API часто предоставляют SDK или библиотеки, которые позволяют интегрировать функции закладок в вашу веб-страницу или приложение. Вот пример высокого уровня с использованием Pocket API:

// Pocket API
function bookmarkPage() {
  // Authenticate with Pocket API and obtain access token
  // Make API request to add bookmark
  fetch('https://getpocket.com/v3/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-Accept': 'application/json',
    },
    body: JSON.stringify({
      url: window.location.href,
      access_token: 'YOUR_ACCESS_TOKEN',
    }),
  })
  .then(response => {
    if (response.ok) {
      alert('Page bookmarked!');
    } else {
      throw new Error('Bookmarking failed');
    }
  })
  .catch(error => {
    console.error('Error:', error);
  });
}

Мы рассмотрели пять различных способов создания кнопки закладок для веб-страниц. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям, будь то использование JavaScript, файлов cookie, серверных решений, расширений браузера или API-интерфейсов закладок. Внедрив эти методы, вы сможете улучшить взаимодействие с пользователем и облегчить посетителям сохранение и повторное посещение любимого веб-контента.