JavaScript收藏夾

在日常的開發中，我們時常需要在多個網站之間切換，查看一些資料。為了方便自己，我們可以使用JavaScript收藏夾來管理我們常去的網站，收藏我們需要的鏈接，使我們的開發工作更加高效。

收藏網站

要想使用JavaScript收藏夾，我們需要先收藏我們想要保存的網站。我們可以直接使用瀏覽器的收藏夾功能，也可以自己編寫JavaScript代碼來實現。下面是一個簡單的例子，我們將把網站保存到localStorage中：

// 獲取保存網站的輸入框和保存按鈕
var input = document.getElementById('site-input');
var saveBtn = document.getElementById('save-btn');
// 監聽保存按鈕的點擊事件
saveBtn.addEventListener('click', function () {
// 獲取輸入框的值
var siteName = input.value;
// 獲取當前頁面的url
var siteUrl = window.location.href;
// 獲取已保存的網站
var sites = JSON.parse(localStorage.getItem('sites')) || [];
// 添加當前網站
sites.push({ name: siteName, url: siteUrl });
// 將網站保存到localStorage中
localStorage.setItem('sites', JSON.stringify(sites));
// 清空輸入框
input.value = '';
});

在這個例子中，我們監聽了保存按鈕的點擊事件，當用戶點擊按鈕時，我們獲取了輸入框中的值和當前頁面的url，并將它們保存到localStorage中。我們還使用了JSON.parse和JSON.stringify來將對象轉換成JSON字符串并將其保存到localStorage中。

顯示已保存的網站

我們已經成功地將網站保存到localStorage中了，接下來我們需要將它們顯示出來。我們可以編寫一個函數來從localStorage中獲取已保存的網站并將它們顯示到頁面上：

// 獲取已保存的網站
var sites = JSON.parse(localStorage.getItem('sites')) || [];
// 獲取顯示已保存網站的列表
var siteList = document.getElementById('site-list');
// 遍歷已保存的網站并添加到列表中
sites.forEach(function (site) {
// 創建列表項和鏈接
var li = document.createElement('li');
var a = document.createElement('a');
// 設置鏈接的屬性
a.href = site.url;
a.textContent = site.name;
// 將鏈接添加到列表項中
li.appendChild(a);
// 將列表項添加到列表中
siteList.appendChild(li);
});

在這個例子中，我們獲取了已保存的網站，并遍歷它們。對于每個網站，我們創建了一個列表項和一個鏈接，并將鏈接添加到列表項中。最后，我們將列表項添加到頁面上顯示出來。

刪除已保存的網站

如果我們不需要一個已保存的網站了，我們可以將它從localStorage中刪除。我們可以在每個列表項中添加一個刪除按鈕，當用戶點擊它時，我們可以從localStorage中刪除它：

// 遍歷已保存的網站并添加到列表中
sites.forEach(function (site, index) {
// 創建列表項、鏈接和刪除按鈕
var li = document.createElement('li');
var a = document.createElement('a');
var deleteBtn = document.createElement('button');
// 設置鏈接的屬性
a.href = site.url;
a.textContent = site.name;
// 設置刪除按鈕的屬性和事件
deleteBtn.textContent = '刪除';
deleteBtn.addEventListener('click', function () {
// 從數組中刪除網站
sites.splice(index, 1);
// 將更新后的網站保存到localStorage中
localStorage.setItem('sites', JSON.stringify(sites));
// 從列表中刪除對應的列表項
siteList.removeChild(li);
});
// 將鏈接和刪除按鈕添加到列表項中
li.appendChild(a);
li.appendChild(deleteBtn);
// 將列表項添加到列表中
siteList.appendChild(li);
});

在這個例子中，我們為每個列表項添加了一個刪除按鈕，并給這個按鈕添加了一個點擊事件。當用戶點擊刪除按鈕時，我們從localStorage中刪除對應的網站，并從列表中刪除對應的列表項。

總結

使用JavaScript收藏夾可以幫助我們管理常去的網站，收藏我們需要的鏈接，提高我們的開發效率。我們可以通過localStorage將網站保存在本地，然后使用JavaScript將它們顯示出來。我們也可以為每個網站添加刪除按鈕，當我們不需要它們時，可以將它們從localStorage中刪除。