📌  相关文章
📜  通过使用本地存储使用JavaScript构建网站书签应用(1)

📅  最后修改于: 2023-12-03 15:28:24.583000             🧑  作者: Mango

通过使用本地存储使用JavaScript构建网站书签应用

简介

这篇文章将介绍如何使用 JavaScript 构建一个简单的网站书签应用，并通过使用本地储存保存书签数据。我们将使用 HTML、CSS 和 JavaScript 来实现这个应用。

本示例的源代码可以在 GitHub 上找到。你可以 fork 或 clone 仓库，并按照本文所述的步骤来运行该应用。

功能列表

首先，我们来定义一下我们即将构建的应用需要具备的功能：

  1. 能够添加书签，包含书签名称和 URL。
  2. 能够移除书签。
  3. 能够在列表视图中显示所有书签。
  4. 保存书签数据到本地存储中，以便下次打开应用时可以恢复之前的内容。

现在我们已经明确了这个应用的功能要求，接下来就让我们开始 step by step 地构建它。

HTML

我们可以从 HTML 开始。下面是我们应用的基本 HTML 结构。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>网站书签应用</title>
</head>

<body>

  <form action="#" id="bookmark-form">
    <div>
      <label for="name">书签名称：</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div>
      <label for="url">URL：</label>
      <input type="url" id="url" name="url" required>
    </div>
    <button type="submit">保存书签</button>
  </form>

  <ul id="bookmark-list"></ul>

  <script src="js/main.js"></script>
</body>

</html>

这个 HTML 文件定义了一个表单，用于添加新的书签，还包含了一个无序列表，用于显示已有书签列表。我们还添加了一个引用 main.js 的 script 标签，它会在页面加载时发起我们的应用。

CSS

在 HTML 完成之后，我们来添加一些 CSS 代码，以使页面看起来更美观。这里我为大家提供了一个基本的示例样式表：

body {
  font-family: sans-serif;
}

form,
#bookmark-list {
  margin: 0 auto;
  width: 400px;
}

#bookmark-form label,
#bookmark-form input[type="text"],
#bookmark-form input[type="url"],
#bookmark-form button[type="submit"] {
  display: block;
  margin: 10px 0;
  font-size: 16px;
}

#bookmark-form button[type="submit"] {
  background-color: #4CAF50;
  color: #fff;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}

#bookmark-list li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

#bookmark-list li a {
  margin-left: 10px;
}

#bookmark-list li a:hover {
  text-decoration: underline;
}

.error-message {
  color: red;
  font-size: 16px;
  font-weight: bold;
}

这些样式简单的设置了一些表单和列表的样式，以及一些其他组件的样式，如按键和错误提示信息。

JavaScript

在 HTML 和 CSS 完成后，我们来开始构建 JavaScript 的部分。

添加书签

首先，我们需要向我们的应用添加新书签。为此，我们将创建一个 addBookmark() 函数，以从表单中获取名称和 URL，并将它们添加到我们的书签列表中。

function addBookmark(e) {
  e.preventDefault();

  const nameInput = document.getElementById("name");
  const urlInput = document.getElementById("url");

  if (!validate(nameInput.value, urlInput.value)) {
    return false;
  }

  const bookmark = {
    name: nameInput.value,
    url: urlInput.value
  };

  let bookmarks = getBookmarks();

  bookmarks.push(bookmark);

  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

  nameInput.value = "";
  urlInput.value = "";

  showBookmarks();

  return false;
}

addBookmark() 函数首先阻止了表单的默认行为，以便能够自定义处理表单提交事件。接下来，我们获取了输入框中的书签名称和 URL。我们简单验证了这两个字段，以确保它们都不为空。如果验证失败，则不会将书签添加到列表中。

然后，我们创建了一个对象，用于保存该书签的名称和 URL。接下来，我们获取在本地存储中存储的所有书签，将新书签添加到该数组中，并将新数组保存回本地存储。最后，我们清除了输入框中的内容，并通过调用 showBookmarks() 函数，将更新的书签列表显示在 UI 上。

移除书签

接下来，我们需要实现移除书签的功能。我们将创建一个 removeBookmark() 函数，以通过点击列表项上的 X 按钮来删除书签。

function removeBookmark(url) {
  let bookmarks = getBookmarks();

  bookmarks = bookmarks.filter(bookmark => bookmark.url !== url);

  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));

  showBookmarks();
}

removeBookmark() 函数首先获取在本地存储中保存的所有书签，从这些书签中筛选出需要删除的书签，并将新的书签数组保存回本地存储。最后，通过调用 showBookmarks() 函数，将更新的列表显示在 UI 上。

显示书签

最后，我们需要编写一个函数，以在列表视图中显示所有书签。我们将创建一个名为 showBookmarks() 的函数，以获取在本地存储中保存的书签，并在 UI 上显示它们。

function showBookmarks() {
  const bookmarks = getBookmarks();

  const bookmarkList = document.getElementById("bookmark-list");

  bookmarkList.innerHTML = "";

  bookmarks.forEach(bookmark => {
    const li = document.createElement("li");
    const a = document.createElement("a");
    a.setAttribute("href", bookmark.url);
    a.setAttribute("target", "_blank");
    a.innerText = bookmark.name;
    const deleteLink = document.createElement("a");
    deleteLink.setAttribute("href", "#");
    deleteLink.innerHTML = "&times;";
    deleteLink.addEventListener("click", e => {
      e.preventDefault();
      removeBookmark(bookmark.url);
    });

    li.appendChild(a);
    li.appendChild(deleteLink);

    bookmarkList.appendChild(li);
  });
}

showBookmarks() 函数首先获取在本地存储中保存的所有书签。我们然后获取用于显示书签列表的无序列表元素。我们清空了该元素中的内容，并通过遍历 bookmarks 数组，为每个书签创建一个列表项，并将该项添加到列表中。

这个函数还为列表项中的 X 图标添加了点击事件，以便通过调用 removeBookmark() 函数来移除书签。

本地存储

我们已经了解了如何创建 addBookmark()、removeBookmark() 和 showBookmarks() 函数。我们还需要了解如何使用本地存储来保存书签数据。

function getBookmarks() {
  let bookmarks = [];

  if (localStorage.getItem("bookmarks")) {
    bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  }

  return bookmarks;
}

getBookmarks() 函数用于获取在本地存储中保存的所有书签数据。如果没有存储任何书签，则返回一个空数组。

总结

我们完成了构建一个网站书签管理应用所需的一切步骤。通过使用 HTML、CSS 和 JavaScript，我们创建了一个简单的 UI，并添加了添加、删除和显示书签的功能。我们还使用本地存储 API 来保存书签数据。

这个示例应用只是开始，你可以在此基础上添加更多的功能，例如编辑书签，支持标签、支持搜索等等。现在你已经有足够的基础知识来扩展这个应用的功能了。