Консультации Портала - Консультация #197553

Задать вопрос Консультации Пользователи Форум

Задать вопрос экспертам

Консультация № 197553

09.01.2020, 23:00

0.00 руб.

0 4 0

Компьютеры Программирование

Здравствуйте! У меня возникли сложности с таким вопросом:

Делаю простой "to do list" с сохранением добавленных задач в local storage. С добавлением и изменение элементов разобрался, все работает, а вот с удалением возникли трудности: работает или удаление с local storage или удаление всей строки с html, если вместе, то моментами удаляет только html, но не в local storage.

Код:

taskList.on('click', '.delete-task-button', function () {
  let key = ($(this).parents('.task-item').index() + 1) // переменная с индексом

  localStorage.removeItem(key) 
  $(this).parents('.task-item').remove()

  //подозреваю, что в некоторый момент .remove() срабатывает быстрее чем let key = ($(this).parents('.task-item').index() + 1)
  //после чего индекс не записывается и соответственно не срабатывает должным образом удаление с local storage
})taskList.on('click', '.delete-task-button', function () {
  let key = ($(this).parents('.task-item').index() + 1) // переменная с индексом

  localStorage.removeItem(key) 
  $(this).parents('.task-item').remove()

  //подозреваю, что в некоторый момент .remove() срабатывает быстрее чем let key = ($(this).parents('.task-item').index() + 1)
  //после чего индекс не записывается и соответственно не срабатывает должным образом удаление с local storage
})

Подскажите пожалуйста как правильно поступить в данной ситуации. Весь код ниже.

HTML:

Код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
    <form action="#" method="post" class="main-form">
        <input type="text" placeholder="Enter task" class="task-input">
        <input type="submit" value="Save" class="add-task-button">
    </form>
    <ul class="task-list"></ul>
</div>


<script src="assets/js/libs.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>

JS:

Код:

localStorage.clear() // временно

let emptyFieldError = 'The field cannot be empty! Please, enter a valid task!'
let taskInput = $('.task-input')
let taskList = $('.task-list')

$('.add-task-button').on('click', function (event) {
  event.preventDefault()
  let valueTask = taskInput.val()

  if (!valueTask) {
    alert(emptyFieldError)
    return false
  }

  let itemTask = '<li class="task-item"><span>' + valueTask + '</span><a href="#" class="delete-task-button">Delete</a><a href="#" class="edit-task-button">Edit</a></li>'

  taskList.append(itemTask)
  taskInput.val('')

  localStorage.setItem(($('.task-item').length), valueTask)
})

taskList.on('click', '.delete-task-button', function () {
  let key = ($(this).parents('.task-item').index() + 1)

  localStorage.removeItem(key) // или это
  $(this).parents('.task-item').remove() // или это
  // по отдельности работает

  //подозреваю, что в некоторый момент .remove() срабатывает быстрее чем let key = ($(this).parents('.task-item').index() + 1)
  //после чего индекс не записывается и соотвественно не срабатывает должным образом удаление с локал сторедж
})

taskList.on('click', '.edit-task-button', function () {
  let currentTask = $(this).siblings('span').text()

  $(this).siblings('span').html('<form class="edit-form"><input type="text" value="' + currentTask + '" class="update-task-input"><a href="#" class="update-task-button">Update</a></form>')
})

taskList.on('click', '.update-task-button', function () {
  let updatedTaskValue = $(this).siblings('.update-task-input').val()

  if (!updatedTaskValue) {
    alert(emptyFieldError)
    return false
  }

  localStorage.setItem(($(this).parents('.task-item').index() + 1), updatedTaskValue)
  $(this).parents('span').text(updatedTaskValue)
})

P.S. Вывод элементов с local storage при повторном запуске страницы или браузера, сделаю позже.
На некоторые семантические косяки и стили не обращайте внимание пожалуйста - это в последнюю очередь.

Обсуждение

давно

Алексеев Владимир Николаевич

Мастер-Эксперт
259041
7459

13.01.2020, 14:13

общий

Адресаты:

Раздел: JavaScript / VBScript был создан для автоматизации администрирования ОперСистем и прочих рутинных операций.

JavaScript и VBScript , выполнямые в среде ОС Windows умеют работать с файлами, папками, дисками, сетью, WinРеестром, читать метаданные из мультимедийных файлов (ДатаСнимка, Исполнитель, Длительность…), делать быстрый разностный бэкап и синхронизацию файлов м-ду дальними компами дом - работа ч-з флэшку, групповое переименование файлов из бестолковых имём типа IMG2307.jpg и DCIM1633.jpg в упорядоченные 2018.05.13-12.30.jpg (для просмотра в порядке хронологии), удалять скрипты и рекламные тэги из сохранённых html-страниц, быстро искать файлы по фразе и типу одновременно и тд.

Ничего из перечисленного не умеют и не будут уметь JavaScript , выполняемые в среде тяжёлых браузеров, потому что главный приоритет политики браузеров - пресечь уязвимости компов пользователей от хакер-проникновения ч-з (интер)net.

Ваш Вопрос о local storage - это браузерная тема сохранения файлов сервер-админа на компах пользователей без их ведома.
Мне часто приходится искать техническую информацию, нужную для подготовки моих ответов. Хорошие спецы часто не могут сами опубликовать свои статьи и отдают материал сайто-держателям. А продажные админы так загаживают страницы со статьями рекламой, что работать со статьёй онлайн невозможно изза всплывающих баннеров. Приходится сохранять страницу и затем вычищать копию от скриптов и проч нечисти.

Я каждую неделю чищу кэш своего браузера от рекламной гадости московских сайт-админов - десятки тысяч мусор-файлов!

Судя по Вашему Вопросу, Вы хотите стать одним из сайт-админов, впихивающих свои файлы в компы читателей, которые загрузили Вашу страницу и доверяют Вам.

Я очень сомневаюсь в практической пользе Вашей затеи, и мне, честно говоря, не хочется тратить время бесполезно и вникать в Ваш код.

Я предлагаю Вам 2 варианта:
1)Убедить экспертов текущего раздела в практической пользе Вашего Вопроса.
2)Перезадать свой вопрос в другой раздел по сайто-браузерной теме :
HTML / DHTML / XML / CSS (Создание программ на языках HTML, DHTML, XML и каскадные таблицы стилей CSS) rfpro.ru/ask/58
Интернет браузеры (Установка, настройка и выбор программ интернет браузеров) rfpro.ru/ask/299
SEO и оценка сайта (Раскрутка сайта, технологии SEO, оценка наполнения и дизайна сайта) rfpro.ru/ask/199

Я не хочу обидеть Вас подозрениями в плохих намерениях. Мне кажется, Вы поддались моде "лёгкие заработки в интернете" и втягиваете себя и экспертов в изучение бесполезных приёмов работы.

давно

Мироненко Николай Николаевич

Посетитель
398978
113

14.01.2020, 20:29

общий

14.01.2020, 21:26

Адресаты:

Владимир Николаевич, мой нынейшний (второй) аккаунт я зарегистрировал в 2015 году, до этого был аккаунт, который я зарегистрировал еще 2007 году, когда портал еще rusfaq назывался (по-моему). В то время я учился в универе на первом курсе и задавал очень много вопросов в разные ветки по программированию: С/С++ Pascal и пр. Часто получалось так, что я не знал как реализовать определенный алгоритм или реализовывал, но что-то работало не совсем так как хотелось или нужно было по условиям задачи. И я задавал свой вопрос на портале, показывая то, что я сделал, и эксперты частенько меня поправляли, за что я им безмерно благодарен. И кст. некоторые из них до сих пор зарегистрированы как эксперты. И тогда и сейчас я понимал, что лучше попробовать сделать самому и набить шишек чем просить кого-то сделать за тебя. Потому и скинул сюда свой не совсем рабочий код, надеясь, что гуру в JS подскажут где-я ошибся. Ведь чуть ниже лого на этом портале написано: "Здесь Вам помогут". И может, в дальнейшем, кто-то будет гуглить решение по подобной теме, зайдет на портал и увидит для себя это решение и разбор каких-то ньюансов в мини-форуме. Ведь для этого существует портал или нет?

По поводу:

Я очень сомневаюсь в практической пользе Вашей затеи, и мне, честно говоря, не хочется тратить время бесполезно и вникать в Ваш код.

Я не хочу обидеть Вас подозрениями в плохих намерениях. Мне кажется, Вы поддались моде "лёгкие заработки в интернете" и втягиваете себя и экспертов в изучение бесполезных приёмов работы.

Я же не прошу Вас разбираться в моем коде, я не лично Вам задал вопрос, а в соответствующую ветку. Та и работаю я легально, в местной компьютерной фирме, женат, даст Бог детки будут и у меня совершенно нет времени маяться дурью и искать легкий заработок в интернете. НО, несколько месяцев назад я зарегистрировался на бесплатные IT курсы в городе Черкассы, эти курсы очень популярные и перспективные. Я сдал вступительный экзамен, прошел собеседование и с 370 с чем-то претендентов выбрали 22 человека, в том числе меня. Т.е. сбылась моя давняя мечта и я начал изучать Frontend+CMS. Каждую неделю (или две) нам читают лекции и дают много домашней работы, это была вторая домашная работа по JS и 11-ая в целом по курсу. Ссылку на скрин прилагаю: https://rfpro.ru/upload/11940

1)Убедить экспертов текущего раздела в практической пользе Вашего Вопроса.

Даже не собираюсь кого-то убеждать. Да и нет в этом смысла, я уже сделал все по условию. Чуть ниже приложу решение, вдруг пригодится кому-то когда вопрос уже уйдет в рассылку.

Владимир Николаевич, Вам с Вашей фантазией надо книжки писать.

Спасибо за потраченное время и берегите кэш своего браузера

давно

Мироненко Николай Николаевич

Посетитель
398978
113

14.01.2020, 20:32

общий

Разобрался, прилагаю свое решение:

Код:

$(document).ready(function () {
  for (let i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i)
    let taskValue = localStorage.getItem(key.toString())

    let taskItem = '<li class="task-item" data-index="' + key + '"><div class="task-text">' + taskValue + '</div>' +
      '<button class="delete-task-button">Delete</button><button class="edit-task-button">Edit</button></li>'

    taskList.append(taskItem)
  }
})

let emptyFieldError = 'The field cannot be empty! Please, enter a valid task!'
let taskInput = $('.task-input')
let taskList = $('.task-list')

$('.add-task-button').on('click', function (event) {
  event.preventDefault()
  let taskValue = taskInput.val()
  let index = $('.task-item').length

  if (!taskValue) {
    alert(emptyFieldError)
    return false
  }

  let taskItem = '<li class="task-item" data-index="' + index + '"><div class="task-text">' + taskValue + '</div>' +
    '<button class="delete-task-button">Delete</button><button class="edit-task-button">Edit</button></li>'

  taskList.append(taskItem)
  taskInput.val('')

  localStorage.setItem(index, taskValue)
})

taskList.on('click', '.delete-task-button', function () {
  let taskItem = $(this).parents('.task-item')
  let key = taskItem.attr('data-index')

  localStorage.removeItem(key)
  taskItem.remove()
})

taskList.on('click', '.edit-task-button', function () {
  let currentTask = $(this).siblings('.task-text').text()

  $(this).siblings('.task-text').html('<form action="#" method="post" class="edit-form" name="edit-form" id="edit-form">' +
    '<input type="checkbox" name="task-complete" value="done" class="task-complete">' +
    '<input type="text" value="' + currentTask + '" class="update-task-input">' +
    '<button class="update-task-button">Update</button></form>')
})

taskList.on('click', '.update-task-button', function () {
  let updatedTaskValue = $(this).siblings('.update-task-input').val()
  let taskItem = $(this).parents('.task-item')
  let key = taskItem.attr('data-index')

  if (!updatedTaskValue) {
    alert(emptyFieldError)
    return false
  }

  localStorage.setItem(key, updatedTaskValue)
  $(this).parents('.task-text').text(updatedTaskValue)
})

taskList.on('change', '.task-complete', function () {
  let taskValue = $(this).siblings('.update-task-input').val()

  if (!taskValue) {
    alert(emptyFieldError)
    return false
  }

  $(this).parents('.task-item').addClass('completed')
  $(this).addClass('hidden')
  $(this).siblings('.update-task-button').addClass('hidden')
  $(this).parents('.task-text').siblings('.edit-task-button').addClass('hidden')
  $(this).parents('.task-text').siblings('.delete-task-button').addClass('hidden')
})

давно

Алексеев Владимир Николаевич

Мастер-Эксперт
259041
7459

15.01.2020, 13:50

общий

Адресаты:

Вы писали "работаю я легально, в местной компьютерной фирме, женат, даст Бог детки будут" - у Вас очень приятная подружка на фото, наверное, и детки у Вас будут хорошенькие.

"Я же не прошу Вас разбираться в моем коде" - а как можно по-другому исправить опубликованный Вами код, если не разобраться в нём? Разве только предложить свой код, если бы Вы вместо кода предложили недвусмысленный алгоритм.

"решение, вдруг пригодится кому-то когда вопрос уже уйдет в рассылку" - не уйдёт Ваше решение в рассылку. Программа Портал-сервера рассылает подписчикам только Вопросы с Ответами экспертов. А на Ваш Вопрос нет Ответа экспертов и уже "Консультация закрыта".

"берегите кэш своего браузера" - язвите над дедушкой?

Не удаётся уберечь кэш полностью. Программа Adblock Plus Ссылка1 помогает лишь ограничить поток мерзкой рекламы. Ваши московские собратья, изучающие JavaScript для браузеров, так обнаглели, что в процессе чистки сохранённых копий я удаляю огромные мусор-блоки внутри тэгов <script…</script> и <style … </style> , превышающие порой в 50…200 раз объём полезного контента! Пришлось даже написать свои VBScript для прог-удаления JavaScript и чистки html-страниц.

А москвичи изощряюся, получают из моего компа инфу об ограничении рекламы и на сайте прогноза погоды rp5.ru/8108/ru скрывают метео-инфу по причине блокировки мною их рекламы - вот ведь гады! Но я всё равно перехитрил их : за 1 секунду, пока они получат мою инфу и скроют свою, я успеваю нажать клавишу PrintScreen и сфотать прогноз, чтоб не отключать Adblock Plus .

"курсы в городе Черкассы" - Вы, вероятно и живёте в цивилизованной Украине с дешёвым безлимитным интернетом? А в нашем ДальнеВосточном поселении интернет ограничен от сотового провайдера. Приходится экономить и бороться с инет-мусором.

"с 370 с чем-то претендентов выбрали 22 человека, в том числе меня. Т.е. сбылась моя давняя мечта и я начал изучать Frontend+CMS" - я искренне поздравляю Вас!
Признаюсь честно, я тоже несколько раз начинал изучать JavaScript . Перед каждой проверкой моего пробного кода мне приходилось загружать тяжёлый браузер, но JavaScript не мог открыть другой файл на другом диске. Мне приходилось из ограниченного JavaScript запускать свой внешний VBScript , который умеет всё. Я так и не понял, зачем тратить время на изучение JavaScript , если у меня нет своего сайта? Если Вы подскажете, мне какая польза от JavaScript , я буду благодарен Вам.

Форма ответа

Отправка постов/ответов доступна только зарегистрированным и подтвержденным пользователям.

Если Вы уже зарегистрированы на Портале - войдите в систему, если Вы еще не регистрировались - пройдите простую процедуру регистрации.