js收藏怎么写

JS收藏怎么写：使用localStorage、使用sessionStorage、使用cookies、使用数据库

在现代Web开发中，有多种方式可以实现JavaScript的收藏功能。使用localStorage 是最常见的方法，因为它简洁且持久化存储数据。localStorage 允许您在用户的浏览器中存储键值对数据，数据不会过期，直到手动删除。以下是如何使用 localStorage 来实现收藏功能的详细说明。

使用 localStorage 的一个实际例子是创建一个收藏夹功能，用户可以点击按钮将特定项目添加到他们的收藏夹中。首先，我们需要设置一个按钮，当用户点击时，将项目ID存储到 localStorage 中。然后，我们可以从 localStorage 中读取这些ID，以便显示用户收藏的项目。

一、使用localStorage实现收藏功能

1、初始化收藏夹

在页面加载时，我们需要初始化收藏夹，这意味着从 localStorage 中读取已存储的收藏项目，并显示它们。

document.addEventListener('DOMContentLoaded', (event) => {

    let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    displayFavorites(favorites);
});
function displayFavorites(favorites) {
    // 假设有一个用于显示收藏项目的div
    const favoritesContainer = document.getElementById('favoritesContainer');
    favoritesContainer.innerHTML = '';
    favorites.forEach(item => {
        let itemElement = document.createElement('div');
        itemElement.textContent = `Item ID: ${item}`;
        favoritesContainer.appendChild(itemElement);
    });
}

2、添加项目到收藏夹

我们需要一个函数，当用户点击收藏按钮时，将项目ID添加到收藏夹中，并保存到 localStorage。

function addToFavorites(itemId) {

    let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    if (!favorites.includes(itemId)) {
        favorites.push(itemId);
        localStorage.setItem('favorites', JSON.stringify(favorites));
        displayFavorites(favorites);
    } else {
        alert('Item already in favorites');
    }
}

3、移除项目从收藏夹

还需要一个函数来移除收藏夹中的项目，并更新 localStorage。

function removeFromFavorites(itemId) {

    let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    favorites = favorites.filter(item => item !== itemId);
    localStorage.setItem('favorites', JSON.stringify(favorites));
    displayFavorites(favorites);
}

二、使用sessionStorage实现收藏功能

sessionStorage 类似于 localStorage，但数据在页面会话结束时（通常是浏览器关闭时）被清除。以下是如何使用 sessionStorage 实现收藏功能。

1、初始化收藏夹

document.addEventListener('DOMContentLoaded', (event) => {

    let favorites = JSON.parse(sessionStorage.getItem('favorites')) || [];
    displayFavorites(favorites);
});

2、添加项目到收藏夹

function addToFavorites(itemId) {

    let favorites = JSON.parse(sessionStorage.getItem('favorites')) || [];
    if (!favorites.includes(itemId)) {
        favorites.push(itemId);
        sessionStorage.setItem('favorites', JSON.stringify(favorites));
        displayFavorites(favorites);
    } else {
        alert('Item already in favorites');
    }
}

3、移除项目从收藏夹

function removeFromFavorites(itemId) {

    let favorites = JSON.parse(sessionStorage.getItem('favorites')) || [];
    favorites = favorites.filter(item => item !== itemId);
    sessionStorage.setItem('favorites', JSON.stringify(favorites));
    displayFavorites(favorites);
}

三、使用cookies实现收藏功能

cookies 是另一种存储用户数据的方法，通常用于会话管理、用户偏好设置和追踪。虽然不如 localStorage 和 sessionStorage 那么简单，但它们在某些情况下非常有用。

1、设置和获取cookies

function setCookie(name, value, days) {

    let expires = "";
    if (days) {
        let date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
    let nameEQ = name + "=";
    let ca = document.cookie.split(';');
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

2、初始化收藏夹

document.addEventListener('DOMContentLoaded', (event) => {

    let favorites = JSON.parse(getCookie('favorites')) || [];
    displayFavorites(favorites);
});

3、添加项目到收藏夹

function addToFavorites(itemId) {

    let favorites = JSON.parse(getCookie('favorites')) || [];
    if (!favorites.includes(itemId)) {
        favorites.push(itemId);
        setCookie('favorites', JSON.stringify(favorites), 7); // Cookie保存7天
        displayFavorites(favorites);
    } else {
        alert('Item already in favorites');
    }
}

4、移除项目从收藏夹

function removeFromFavorites(itemId) {

    let favorites = JSON.parse(getCookie('favorites')) || [];
    favorites = favorites.filter(item => item !== itemId);
    setCookie('favorites', JSON.stringify(favorites), 7);
    displayFavorites(favorites);
}

四、使用数据库实现收藏功能

在更复杂的应用中，您可能需要将收藏数据存储在服务器上的数据库中。这通常需要与后端服务器进行通信（例如，通过API）。

1、添加项目到收藏夹

async function addToFavorites(itemId) {

    try {
        let response = await fetch('/api/favorites', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ itemId: itemId })
        });
        if (response.ok) {
            let favorites = await response.json();
            displayFavorites(favorites);
        } else {
            alert('Failed to add item to favorites');
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

2、移除项目从收藏夹

async function removeFromFavorites(itemId) {

    try {
        let response = await fetch(`/api/favorites/${itemId}`, {
            method: 'DELETE'
        });
        if (response.ok) {
            let favorites = await response.json();
            displayFavorites(favorites);
        } else {
            alert('Failed to remove item from favorites');
        }
    } catch (error) {
        console.error('Error:', error);
    }
}

3、初始化收藏夹

document.addEventListener('DOMContentLoaded', async (event) => {

    try {
        let response = await fetch('/api/favorites');
        if (response.ok) {
            let favorites = await response.json();
            displayFavorites(favorites);
        } else {
            alert('Failed to load favorites');
        }
    } catch (error) {
        console.error('Error:', error);
    }
});

无论您选择哪种方法，记住要根据实际应用场景和需求进行选择。如果需要团队协作和项目管理，推荐使用 研发项目管理系统PingCode 和 通用项目协作软件Worktile，以提高开发效率和项目管理质量。

相关问答FAQs：

1. 为什么我需要学习如何写JS收藏？

学习如何写JS收藏可以让您更有效地管理和组织您的JavaScript代码，使其更易于重用和维护。

2. 我应该如何开始写JS收藏？

首先，您可以创建一个文件夹来存放您的JS收藏。然后，您可以根据功能或主题将相关的代码片段放入不同的文件中，以便稍后使用。

3. 我可以从哪些资源中获取JS收藏的灵感？

有很多资源可以为您提供JS收藏的灵感。您可以浏览各种开源代码库、代码片段网站或社区论坛，寻找与您目前工作或项目相关的JavaScript代码示例。