书签

构建书签管理系统：练习 JavaScript 和本地存储

随着我继续我的前端开发之旅，我意识到需要练习高级 JavaScript 概念并创建功能性项目来巩固我的技能。为此，我使用 HTML、CSS、Bootstrap 和 JavaScript 构建了一个书签管理系统。该项目利用本地存储进行数据持久化，并包括添加、更新、删除和搜索书签等功能。

这个项目不仅帮助我提高了我的 JavaScript 技能，还让我深入了解了如何创建用户友好的界面并有效地管理客户端数据。

书签管理系统的功能

添加书签：使用名称和 URL 保存书签。

搜索书签：按名称快速查找书签。

更新书签：编辑现有书签详细信息。

删除书签：永久删除书签。

数据持久性：书签存储在浏览器的本地存储中，确保即使在刷新页面后仍然可用。

验证：输入验证确保仅接受有效的书签名称和 URL。

关键 JavaScript 代码片段和概念

保存书签到本地存储

let bookmarksContainer = [];
if (localStorage.getItem('book')) {
    bookmarksContainer = JSON.parse(localStorage.getItem('book'));
    display();
}

addbtn.addEventListener('click', function() {
    if (bookName.classList.contains('is-valid') && bookUrl.classList.contains('is-valid')) {
        let bookmark = {
            name: bookName.value,
            url: bookUrl.value
        };
        bookmarksContainer.push(bookmark);
        localStorage.setItem('book', JSON.stringify(bookmarksContainer));
        clearInput();
        display();
    } else {
        errorBox.classList.remove('d-none');
    }
});

此代码初始化书签容器，并确保在刷新页面时加载保存在本地存储中的书签。

显示书签

function display() {
    let row = '';
    for (let i = 0; i < bookmarksContainer.length; i++) {
        let httpURL = 'https://' + bookmarksContainer[i].url;
        row += `
            
                ${i + 1}
                ${bookmarksContainer[i].name}
                Visit
                
                
            
        `;
    }
    document.getElementById('tableOfContent').innerHTML = row;
}

显示功能以表格形式动态呈现书签，方便用户管理已保存的链接。

删除书签

function deleteItem(index) {
    bookmarksContainer.splice(index, 1);
    display();
    localStorage.setItem('book', JSON.stringify(bookmarksContainer));
}

此功能删除所选的书签并更新本地存储以确保数据一致性。

输入验证

功能

validateInput(element) {
    const regex = {
        bookmarkName: /^([A-Z]|[a-z]|[0-9]){3,}$/,
        URL: /^(https?:\/\/)?(w{3}\.)?\w+\.\w{2,}\/?(:\d{2,5})?(\/\w+)*$/
    };
    if (regex[element.id].test(element.value)) {
        element.classList.add('is-valid');
        element.classList.remove('is-invalid');
        return true;
    } else {
        element.classList.add('is-invalid');
        element.classList.remove('is-valid');
        return false;
    }
}

此验证可确保用户输入有意义的名称和格式正确的 URL。

更新书签

function setFormForUpdate(i) {
    updatedIndex = i;
    addbtn.classList.add('d-none');
    updatebtn.classList.remove('d-none');
    bookName.value = bookmarksContainer[i].name;
    bookUrl.value = bookmarksContainer[i].url;
}

function update() {
    bookmarksContainer[updatedIndex].name = bookName.value;
    bookmarksContainer[updatedIndex].url = bookUrl.value;
    display();
    localStorage.setItem('book', JSON.stringify(bookmarksContainer));
    clearInput();
    addbtn.classList.remove('d-none');
    updatebtn.classList.add('d-none');
}

更新功能允许用户修改现有书签并无缝保存更改。

经验教训

数据管理：从本地存储存储和检索数据让我了解到客户端存储的重要性。

动态 DOM 操作：动态创建、更新和删除 DOM 元素提高了我的 JavaScript 技能。

输入验证：确保只接受有效的输入，使应用程序更加健壮。

用户体验：添加错误处理和表单验证提高了项目的整体可用性。

未来的增强功能

实现基于类别的书签组织。

添加拖放功能以对书签进行排序。

使用外部 API 获取网站元数据以获得更好的书签预览。

这个项目既有趣又富有挑战性，让我加深了对 JavaScript 的理解，并提高了我构建交互式、以用户为中心的 Web 应用程序的技能。如果你也有类似的经历，我鼓励你构建和试验这样的项目来提高你的技能。

CLIS.CC

书签