Розуміння основ

Будівля конструктора закладок з JavaScript та API Веб-накопичувача є відмінним проектом для створення фундаментальних ідей переднього класу. На його основі програма повинна оброблятися три первинні операції: create, , , і delete — класичний шаблон CRUD, оновлення для цього. Дані живуть в браузері

Перед написанням одного рядка коду, затвердіть розуміння наступних стовпів:

  • DOM API: Ви будете перебувати елементи, слухайте події та маніпуляєте вікно документа, щоб відобразити закладки динамічно.
  • localStorage: Цей магазин ключа зберігає дані навіть після завершення браузера. Він підтримує рядки, тому об'єкти повинні бути послідовні з і десеріалізовані з .
  • ]]Event-driven програмування: Форми випромінюють події; видалити кнопки вогню події. Майстерування ] непереборна.
  • , , , і допоможе ефективно рендерити і маніпулювати список закладок.

Будівництво Core Bookmark Manager

Структура HTML

Почати з мінімальним, сеймантичним HTML скелетом. У вигляді зібрано ім’я закладки та URL; непорядкований список надає збережені закладки.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Bookmark Manager</title>
</head>
<body>
 <h1>My Bookmarks</h1>
 <form id="bookmarkForm">
 <label for="name">Name</label>
 <input type="text" id="name" required />
 <label for="url">URL</label>
 <input type="url" id="url" required />
 <button type="submit">Add Bookmark</button>
 </form>
 <ul id="bookmarkList"></ul>
 <script src="app.js" defer></script>
</body>
</html>

Повідомлення про атрибут на тегі скрипта— він забезпечує DOM повністю паровані до виконання скриптів, що виключає необхідність обгортання в сучасних налаштуваннях.

Стилінг для зручності користування (опціональний, але Рекомендований)

Хоча CSS не фокус, чистий інтерфейс покращує досвід користувача. Додати простий стильний аркуш до простору з форми, дати кнопки послідовний вигляд, і стиль закладок список елементів з ефектами конюшини. Мінімальна вбудована укладка також може бути введена через JavaScript, але окрема є кращим для підтримки.

<!-- inside <head> -->
<link rel="stylesheet" href="style.css" />

, використовуйте флексбокс для макета форми, максимальну ширину для контейнера, і чіткі візуальні відгуки для видалення кнопок, щоб запобігти випадковому натисканню.

JavaScript Логіка - Серце застосування

Усі персистентності та взаємодіяльність, що живуть . Наступні розділи розбили кожну функцію.

Ініціалізація даних

Для цього необхідно вказати на адресу або зайти назад до порожніх масивів.

let bookmarks = [];

function loadBookmarks() {
 const stored = localStorage.getItem('bookmarks');
 if (stored) {
 bookmarks = JSON.parse(stored);
 } else {
 bookmarks = [];
 }
}

function saveBookmarks() {
 localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}

loadBookmarks();

Функція називається кожен раз, коли масив змінюється — після додавання, редагування або видалення закладки. Це забезпечує збереження завжди синхронізується з вбудованим масивом.

Відображення закладок

Відлік списку закладок означає, що вінтерінг над масив і створення списку елементів з анкерним тегом і кнопками видалення.

function renderBookmarks() {
 const list = document.getElementById('bookmarkList');
 list.innerHTML = ''; // clear existing entries

 bookmarks.forEach(function(bookmark, index) {
 const li = document.createElement('li');
 li.dataset.index = index;

 const link = document.createElement('a');
 link.href = bookmark.url;
 link.textContent = bookmark.name;
 link.target = '_blank';
 link.rel = 'noopener noreferrer';

 const deleteBtn = document.createElement('button');
 deleteBtn.textContent = 'Delete';
 deleteBtn.addEventListener('click', function() {
 deleteBookmark(index);
 });

 li.appendChild(link);
 li.appendChild(deleteBtn);
 list.appendChild(li);
 });
}

Використання замість внутрішньогоHTML уникає вразливостей XSS при назвах закладок містять HTML. Кнопка видалення використовує закриття для захоплення індексу закладки.

Додавання закладки

Послухайте події , не допустіть перезавантаження сторінки за замовчуванням, створіть об'єкт закладок, натиснувши його в масив, персистент і ре-рендер.

document.getElementById('bookmarkForm').addEventListener('submit', function(e) {
 e.preventDefault();

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

 const newBookmark = {
 name: nameInput.value.trim(),
 url: urlInput.value.trim()
 };

 // Basic validation: ensure URL starts with http/https
 if (!newBookmark.url.startsWith('http://') && !newBookmark.url.startsWith('https://')) {
 newBookmark.url = 'https://' + newBookmark.url;
 }

 bookmarks.push(newBookmark);
 saveBookmarks();
 renderBookmarks();

 // Reset form
 nameInput.value = '';
 urlInput.value = '';
 nameInput.focus();
});

Цей підхід є прямим вибором. Для виробництва, ви можете перевірити формат URL, який використовується конструктор або regex.

Видалення закладки

Видалення вилученого елементу в даній індексі та сховищі оновлень та DOM.

function deleteBookmark(index) {
 bookmarks.splice(index, 1);
 saveBookmarks();
 renderBookmarks();
}

мутує масив в місці. Якщо ви віддаєте перевагу нездатності, ви можете використовувати і reassign , але для невеликого проекту, як це, ] є чітким і виконавцем.

Підвищення застосування

Після роботи з основними CRUD, врахуйте ці вдосконалення, щоб перетворити прототип на надійний інструмент.

Редагування закладок

Замініть статичну назву / посилання з режимом редагування в режимі реального часу. Коли користувач натискає кнопку редагування, запустіть якірний тег з полями введення, попередньо заповнені поточними значеннями. На збереження, оновлення масиву та персистента.

Натиснення: додати функцію , яка створює редаговані вводи. Використовуйте , делегування ] на списку, щоб обробляти редагування, не прикріплюючи багаторазові слухачі.

Категоризація з тегами

Додати додаткові власність на кожен об'єкт закладок (наприклад, ). Потім, подовжити UI з фільтровим входом, який приховує елементи списку, чиї теги не відповідають. Ви можете зберігати теги як окремий рядок у вигляді кома-запалений рядок і розбити їх в масив.

Імпорт і експорт

Дозволяє користувачам резервно-передача закладок. Використовуйте або файл завантаження. Експорт серіализує в рядок JSON і запускає завантаження через і . Імпорт читає JSON і об'єднує з існуючими закладками.

function exportBookmarks() {
 const data = JSON.stringify(bookmarks, null, 2);
 const blob = new Blob([data], { type: 'application/json' });
 const url = URL.createObjectURL(blob);
 const a = document.createElement('a');
 a.href = url;
 a.download = 'bookmarks.json';
 a.click();
 URL.revokeObjectURL(url);
}

Пошук і фільтр

Додати вхід над списком закладок. На кожному захід, фільтрувати масив за назвою (або URL) і викликати варіант , який відображає тільки відповідні матчі. Щоб уникнути втрати оригінального списку, зберігайте фільтровану копію або скористайтеся комп'ютерним параметром.

Тестування та сумісність браузера

локальнийСтораж підтримується в усіх сучасних браузерах, але старших версій Internet Explorer (IE 8+) мали інший API. Якщо ви повинні підтримувати навколишні середовища, перевірте поліфілами або запади до файлів cookie. Сьогодні Chrome, Firefox, Safari, Edge] (both Chromium and legacy) і без проблем.

При тестуванні перевірте:

  • За допомогою веб-сайтів, що виробляються на сайті, ви можете скористатися посиланнями на сторінку.
  • Видалення закладок оновлення як UI, так і для зберігання.
  • Наведено спеціальні символи в назвах закладок (коментарі, ампери)
  • URL-адреси з і без .

Використовуйте developer Tools > Application > Зберігання > Локальне зберігання для перевірки збережених даних вручну
] Для автоматизованого тестування, розглянути використання Cypress] або Playwright для імітації робочих процесів користувача — заповнення форми, додавання, видалення, перевантаження — і затвердження списку зберігається.

Висновок

Цей проект демонструє, як кілька десятків ліній ванільного JavaScript може створити повнофункціональний, стійкий веб-додаток. Ви навчилися загартувати localStorage API для отримання даних, ], делегація винахідних для ефективного оновлення UI, а CRUD операції] без задньої. У шаблоні ви надали — ініціалізація стану з зберігання, мутування стану через функції, а також ре-rendering DOM — основа багатьох сучасних передових або сучасних React-вих рамок.

Щоб поглибити своє розуміння, вивчити документації МДН на місцевомуСторі і читати про ], що працює в DOM]. Для більш сучасного управління дивляться на IndexedDB для збільшення даних або service робітників] для офлайн-перших досвіду. З цими блоками будівель можна зараз розширити свій закладок у повноцінну базу знань.