Создание приложения-закладки сайта с помощью 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 содержит базовые функции добавления, хранения и удаления с использованием локального хранилища. Вы можете проявить творческий подход, а также добавить функциональные возможности функции редактирования или создать коллекции для хранения закладок, используя вложенный список.

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

Technical Scripter JavaScript HTML CSS-Misc HTML-Misc CSS Проект

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

HTML

CSS

Javascript

Javascript

Javascript

Javascript

Javascript

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