📌  相关文章
📜  使用本地存储使用 JavaScript 构建站点书签应用程序(1)

📅  最后修改于: 2023-12-03 14:49:55.606000             🧑  作者: Mango

使用本地存储使用 JavaScript 构建站点书签应用程序

在现今的信息时代，互联网已经成为了人们获取信息和解决问题的主要途径之一，许多人会在日常浏览中收藏一些网站，以便日后快速访问。本文将介绍如何使用 JavaScript 构建一个站点书签应用程序，并使用本地存储来保存已添加的书签。

实现思路

本应用程序的实现思路如下：

  1. 使用 HTML 和 CSS 构建用户界面，包括添加书签、展示书签等功能的按钮和区域。
  2. 使用 JavaScript 代码来监听用户点击事件，实现添加、删除、展示书签等功能。
  3. 使用 Web Storage 提供的本地存储来保存已添加的书签信息。
实现步骤
1. HTML 和 CSS

首先，我们需要使用 HTML 和 CSS 来构建应用程序的用户界面。以下是一个简单的示例：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>站点书签应用程序</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>站点书签应用程序</h1>
    <p>请输入网站名称和地址，然后点击“添加”按钮：</p>
    <form>
      <label for="name">名称：</label>
      <input type="text" id="name" name="name" placeholder="请输入网站名称"><br>
      <label for="url">地址：</label>
      <input type="text" id="url" name="url" placeholder="请输入网站地址">
      <button type="submit">添加</button>
    </form>
    <hr>
    <h2>我的书签</h2>
    <ul id="bookmarks"></ul>
    <script src="app.js"></script>
  </body>
</html>

在上面的代码中，我们定义了一个表单，包含了输入网站名称和地址的两个文本框，还有一个“添加”按钮。在表单下面，我们又定义了一个包含了所有书签的列表。

2. JavaScript

接下来，我们将使用 JavaScript 代码来为表单和列表中的元素添加点击事件监听器，以实现添加、删除、展示书签等功能。

首先我们需要获取表单和列表元素的引用，然后为表单添加一个“submit”事件监听器，当用户点击“添加”按钮时，将表单中的网站名称和地址信息添加到列表中。以下是示例代码：

// 获取表单和列表元素的引用
const form = document.querySelector('form');
const ul = document.querySelector('#bookmarks');

// 为表单添加一个“submit”事件监听器
form.addEventListener('submit', function(e) {
  // 阻止表单默认的提交行为
  e.preventDefault();
  
  // 获取表单中网站名称和地址信息
  const name = document.querySelector('#name').value;
  const url = document.querySelector('#url').value;
  
  // 创建一个包含网站名称和地址信息的对象
  const bookmark = { name, url };
  
  // 将对象转换为字符串并保存到本地存储
  localStorage.setItem('bookmark_' + name, JSON.stringify(bookmark));
  
  // 将输入框内容清空
  document.querySelector('#name').value = '';
  document.querySelector('#url').value = '';
  
  // 调用展示书签的函数，更新书签列表
  showBookmarks();
});

// 展示书签的函数
function showBookmarks() {
  // 先清空列表中的所有元素
  ul.innerHTML = '';
  
  // 遍历本地存储中所有的书签信息，并将其添加到列表中
  for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    
    // 如果当前的键是以“bookmark_”开头的，则表示其是一个书签信息
    if (key.startsWith('bookmark_')) {
      const bookmark = JSON.parse(localStorage.getItem(key));
      const li = document.createElement('li');
      li.innerHTML = `<a href="${bookmark.url}">${bookmark.name}</a>
                      <button class="delete" onclick="deleteBookmark('${bookmark.name}')">删除</button>`;
      ul.appendChild(li);
    }
  }
}

// 删除书签的函数
function deleteBookmark(name) {
  // 从本地存储中删除该书签信息
  localStorage.removeItem('bookmark_' + name);
  
  // 调用展示书签的函数，更新书签列表
  showBookmarks();
}

// 页面加载时，调用展示书签的函数，初始化书签列表
showBookmarks();

在上面的代码中，我们先获取表单和列表元素的引用，并为表单添加了一个“submit”事件监听器。当用户提交表单时，我们将获取到的信息封装成一个包含网站名称和地址信息的对象，然后将其转换为字符串并保存到本地存储中。接着我们将输入框的内容清空，并调用展示书签的函数来更新书签列表。

展示书签的函数首先清空列表中的所有元素，然后遍历本地存储中所有的键值对，如果当前的键是以“bookmark_”开头的，则表示其是一个书签信息，我们就使用 JSON 解析器将其转换为对象，并将其添加到列表中。为了能够删除已添加的书签，我们在每个列表元素后面都添加了一个“删除”按钮，并为其添加了一个点击事件监听器，当用户点击该按钮时，我们就从本地存储中删除该书签信息，并调用展示书签的函数来更新书签列表。

3. Web Storage

最后，我们需要使用 Web Storage 提供的本地存储来保存已添加的书签信息。以下是示例代码：

// 将对象转换为字符串并保存到本地存储
localStorage.setItem('bookmark_' + name, JSON.stringify(bookmark));

// 从本地存储中删除该书签信息
localStorage.removeItem('bookmark_' + name);

在上面的代码中，我们使用了 localStorage 对象提供的“setItem”和“removeItem”方法来保存和删除书签信息。“localStorage.setItem(key, value)”方法将给定的键值对保存到本地存储中；“localStorage.removeItem(key)”方法从本地存储中删除给定的键值对。需要注意的是，为了避免与其他应用程序的键值对冲突，在保存和删除键值对时，我们都给其添加了一个“bookmark_”前缀。

注：Web Storage 提供了两种本地存储方式：

  1. localStorage：数据不过期，除非手动删除或者清除浏览器缓存。
  2. sessionStorage：数据在会话结束时（关闭浏览器）被删除。
总结

本文介绍了如何使用 JavaScript 构建一个站点书签应用程序，并使用 Web Storage 提供的本地存储来保存已添加的书签信息。需要注意的是，由于 Web Storage 的大小限制是 5MB，所以不能保存过多的书签信息。在实际开发中，还需要考虑其他的安全性和易用性问题，如跨站点脚本攻击和用户界面的友好性等。