Создание приложения-закладки сайта с помощью JavaScript с использованием локального хранилища

Опубликовано: 5 Января, 2022

В этой статье мы создадим приложение Site Bookmark, используя HTML, CSS и JavaScript. Это поможет нам хранить ссылки на наши любимые веб-сайты, не работая с какой-либо базой данных, а просто используя локальное хранилище нашего браузера.

Локальное хранилище известно как API веб-хранилища и позволяет нам хранить данные на стороне клиента. Данные в локальном хранилище хранятся в виде строк и сохраняются даже после закрытия сеанса. Данные могут быть удалены только в том случае, если пользователь удаляет их вручную. Все данные остаются на стороне клиента, поэтому существует определенное ограничение относительно длины значений, и в настоящее время мы можем хранить от 2 МБ до 10 МБ данных в зависимости от используемого браузера.

Подход: разрабатываемое нами приложение Bookmark может выполнять следующие функции:

  • Добавьте новую закладку с введенным пользователем именем и ссылкой на веб-сайт.
  • Возможность посещения веб-сайта
  • Удаление закладки
  • Затем всегда сохраняйте закладки навсегда в LocalStorage.

Краткое описание проекта:

Файловая структура:

  • index.html
  • style.css
  • main.js

Мы будем использовать HTML для разработки структуры или макета веб-страницы. Это включает:

  • Раздел заголовка: включает заголовок нашей веб-страницы. Здесь заголовок «Закладка сайта».
  • Раздел контейнера: он содержит раздел формы и закладок.
  • Раздел формы: он включает два поля ввода, для имени сайта и ссылки. Он также содержит одну кнопку «сохранить» для отправки формы.
  • Раздел закладок: этот раздел будет содержать все наши сохраненные закладки и будет динамически изменяться в зависимости от ввода.

HTML

<!DOCTYPE html>
< html lang = "en" >
< head >
< title >Site Bookmarker</ title >
<!-- link the CSS file here -->
< link rel = "stylesheet" type = "text/css" href = "style.css" >
</ head >
< body >
< h1 >Site Bookmarker</ h1 >
< div class = "container" >
<!-- form to enter details of site -->
< form class = "form" action = "#" >
< div class = "input-field" >
< label for = "site_name" >Name</ label >
< input name = "site_name" type = "text"
placeholder = "site name" >
</ div >
< div class = "input-field" >
< label for = "url" >URL</ label >
< input name = "url" type = "text"
placeholder = " https://www.example.com " >
</ div >
< button class = "save_button" >Save</ button >
</ form >
<!-- section where bookmarks will be displayed -->
< h2 >Saved Bookmarks</ h2 >
< div class = "bookmarks" ></ div >
</ div >
<!-- link the JavaScript file here -->
< script src = "./main.js" ></ script >
</ body >
</ html >

Стили CSS: CSS используется для стилизации различных частей и придания им большей визуальной привлекательности.

  • Раздел формы и закладок отображается с использованием гибкого макета.
  • Каждому элементу даны соответствующие отступы и поля.
  • Размер текста, цвет каждого элемента и цвет фона таковы, что пользователь может легко их прочитать.
  • Отдельная закладка будет динамически добавляться или удаляться при необходимости.

CSS

*{
box-sizing: border-box;
font-family : sans-serif ;
}
body{
margin : 0 ;
padding : 0 ;
background-color : #333333 ;
}
a{
text-decoration : none ;
color : #fff ;
}
/*Styling title*/
h 1 {
width : 100% ;
height : 80px ;
text-align : center ;
line-height : 80px ;
margin : 0 ;
padding : 0 ;
background-color : #47CF73 ;
letter-spacing : 2px ;
word-spacing 8px : ;
color : #000 ;
}
h 2 {
color : #47CF73 ;
}
.container{
width : 600px ;
min-height : 150px ;
background-color : #333333 ;
margin : 0 auto ;
}
/*Styling form section*/
.form{
width : 100% ;
height : auto ;
background-color : #555555 ;
padding : 40px 50px ;
margin : 20px 0 ;
}
.input-field{
display : flex;
flex- direction : column;
align-items: center ;
margin-bottom : 15px ;
}
.input-field input[type= "text" ]{
width : 250px ;
height : 25px ;
outline : none ;
border : none ;
background-color : transparent ;
border-bottom : 2px solid #47CF73 ;
padding-left : 10px ;
color : #fff ;
}
.input-field label{
color : #47CF73 ;
font-weight : bold ;
margin-bottom : 5px ;
}
.save_button{
display : block ;
margin : 0 auto ;
border : none ;
width : 70px ;
height : 25px ;
background-color : #47CF73 ;
color : #000 ;
cursor : pointer ;
outline : none ;
}
/*Styling Bookmarks section*/
.bookmarks{
width : 100% ;
background-color : #555555 ;
padding : 20px ;
}
.bookmark{
display : flex;
align-items: center ;
width : 300px ;
height : 40px ;
padding : 5px 20px ;
background-color : #FAFAFA ;
margin-bottom : 10px ;
background-color : #333333 ;
}
.bookmark span{
flex: 1 ;
font-weight : bold ;
letter-spacing : 1.5px ;
color : #fff ;
}
.bookmark .visit{
width : 50px ;
height : 25px ;
line-height : 25px ;
text-align : center ;
background-color : #47CF73 ;
color : #000 ;
border-radius: 5px ;
margin : 0 5px ;
}
.bookmark .delete{
width : 60px ;
height : 25px ;
line-height : 25px ;
text-align : center ;
background-color : #F44336 ;
border-radius: 5px ;
}

Логика: Основная логика нашего приложения реализована с использованием JavaScript. В приложении есть несколько функций, которые работают вместе.

Шаг 1 (выбор всех элементов и определение переменных):

  • Первое, что нам нужно, это получить ссылку на все, что нам нужно, из DOM. Необходимые элементы в макете HTML выбираются с помощью метода querySelector ().
  • Это захватит «.bookmarks», «.save_button» и поля ввода, такие как «site_name» и «url» из DOM, и сохранит их в соответствующих переменных.
  • Им присваиваются имена переменных, чтобы к ним можно было легко получить доступ и изменить.
  • Кроме того, определение объектов закладок для нашего локального хранилища для хранения всех закладок.

Javascript

// Select the save button
var button = document.querySelector( ".save_button" );
// Select the input box
var siteName = document.querySelector( "[name='site_name']" );
var url = document.querySelector( "[name='url']" );
// Select the <div> with class="bookmarks"
var bookmarksSection = document.querySelector( ".bookmarks" );
// Hold bookmarks in local storage
if ( typeof (localStorage.bookmark) == "undefined" ){
localStorage.bookmark = "" ;
}

Шаг 2 (Получение значений и настройка проверки для отправки события в форме):

  • У нас есть EventListener для кнопки сохранения, чтобы прослушивать событие щелчка в форме. Функция активируется всякий раз, когда происходит щелчок.
  • Каждый раз при отправке формы страница будет перезагружаться. Чтобы остановить это, мы вызываем e.preventDefault ().
  • Мы можем получить введенное пользователем имя и URL-адрес из siteName.value и url.value соответственно.
  • Включена некоторая проверка, чтобы убедиться, что мы не сохраняем вещи дважды и что наша форма не пуста.
  • После проверки передайте введенное пользователем значение функции addBookmark ().

Примечание. Мы можем хранить элементы в localStorage, используя метод setItem (), который требует ключа и значения. Здесь мы используем localStorage.bookmark, который автоматически создает закладку в качестве ключа в нашем localStorage.

Javascript

// listen for form submit
button.addEventListener( "click" , function (e){
// Prevent the page from reloading when submitting the form
e.preventDefault();
let patterURL = /https?://(www.)?[-a-zA-Z0-9@:%._+~ #=]{2,256}.[az]{2,6}([-a-zA-Z0-9@:%_+.~#?&//=]*)?/gi;
let arrayItems, check = false , adr, itemAdr;
// Validation of form and URL
if (siteName.value === "" ){
alert( "you must fill the siteName input" );
} else if (url.value === "" ){
alert( "you must fill the url input" );
} else if (!patterURL.test(url.value)){
alert( "you must enter a valid url" );
} else {
arrayItems = localStorage.bookmark.split( ";" );
adr = url.value;
adr = adr.replace(/http://|https:/ //i, "");
arrayItems.length--;
// Check if website is already bookmarked
for (item of arrayItems){
itemAdr = item.split( ',' )[1].replace(/http://|https:/ //i,"");
if (itemAdr == adr){
check = true ;
}
}
if (check == true ){
alert( "This website is already bookmarked" );
}
else {
// If all checks are correct,add bookmark to local storage
localStorage.bookmark += `${siteName.value},${url.value};`;
addBookmark(siteName.value, url.value);
siteName.value = "" ;
url.value = "" ;
}
}
});

Шаг 3 (Добавьте закладки на нашу веб-страницу): эта функция addBookmark () примет в качестве аргумента имя и URL-адрес сайта. Потом:

  • Создает новый объект закладки.
  • Этот объект имеет имя, URL-адрес и свойства посещения и удаления.
  • Затем он помещает этот объект в наш раздел закладок на HTML-странице.
  • После этого мы вызовем функцию fetchBookmark (). Эта функция отвечает за отображение каждого элемента на экране.

Javascript

// Function to add the bookmark
function addBookmark(name, url){
let dataLink = url;
// After obtaining a bookmark, we display it in a div and add
// a button to visit the link or to delete it
if (!url.includes( "http" )){
url = "//" + url;
}
let item = `<div class= "bookmark" >
<span>${name}</span>
<a class= "visit" href= "${url}" target= "_blank"
data-link= '${dataLink}' >Visit</a>
<a onclick= "removeBookmark(this)"
class= "delete" href= "#" > delete </a>
</div>`;
bookmarksSection.innerHTML += item;
}

Шаг 4 (Визуализация сохраненных закладок): Теперь мы можем добавить закладки в наше приложение и сохранить их в localStorage. Но когда мы обновляем страницу или запускаем новый сеанс, все закладки исчезают с веб-страницы, даже если они хранятся в localStorage.

Поэтому нам нужно сохранить их, извлекая закладки из localStorage с помощью функции fetchBookmark ().

  • Сначала мы проверим, является ли заданный ключ закладки пустым или нет. Если он не пустой, то:
  • Мы создадим массив всех закладок с помощью метода split ().
  • Затем пройдемся по каждому элементу внутри. И для каждой закладки мы получим имя и URL-адрес.
  • Чтобы отобразить эти элементы, мы вызовем функцию addBookmark ().

Javascript

// function to render the saved bookmarks
( function fetchBoookmark(){
if ( typeof (localStorage.bookmark) != "undefined" && localStorage.bookmark !== "" ){
let arrayItems = localStorage.bookmark.split( ";" );
arrayItems.length--;
for (item of arrayItems){
let itemSpli = item.split( ',' );
addBookmark(itemSpli[0], itemSpli[1]);
}
}
})();

Шаг 5 (Удаление закладок): переход по ссылке несложен, мы просто следуем URL-адресу, но чтобы удалить его, нам нужно определить конкретный URL-адрес в нашем localStorage, а затем удалить его из нашего объекта.

Для этого мы напишем функцию removeBookmark ().

  • Сначала мы извлечем все закладки из localStorage и сохраним их в массиве.
  • Метод splice () используется для удаления элементов из массива и возвращает обновленные элементы.
  • Также мы будем использовать метод removeChild () для удаления дочерних узлов из родительского узла закладок.

Javascript

// Function to remove the bookmark
function removeBookmark(thisItem){
let arrayItems = [],
index,
item = thisItem.parentNode,
itemURL = item.querySelector( ".visit" ).dataset.link,
itemName = item.querySelector( "span" ).innerHTML;
arrayItems = localStorage.bookmark.split( ";" );
for (i in arrayItems){
if (arrayItems[i] == `${itemName},${itemURL}`){
index = i;
break ;
}
}
//update the localStorage
index = arrayItems.indexOf(`${itemName},${itemURL}`);
arrayItems.splice(index,1);
localStorage.bookmark = arrayItems.join( ";" );
//update the bookmark Section
bookmarksSection.removeChild(item);
}

Вывод: Вот и все, наше приложение Site Bookmarker готово. Вы также можете увидеть сохраненные закладки в localStorage, как показано ниже:

Это приложение Site Bookmarker содержит базовые функции добавления, хранения и удаления с использованием локального хранилища. Вы можете проявить творческий подход, а также добавить функциональные возможности функции редактирования или создать коллекции для хранения закладок, используя вложенный список.

Если вы хотите узнать больше о локальном хранилище и его функциях, вы можете посетить следующий сайт: Локальное хранилище и хранилище сеансов

РЕКОМЕНДУЕМЫЕ СТАТЬИ