Как изменить значение объекта локального хранилища

Я пишу приложение списка дел, и у меня возникает проблема, когда я нажимаю кнопку редактирования, чтобы изменить значение задачи, Я хочу изменить значение входной задачи, изменить его в объектной задаче "заголовок" и сохраните его в локальном хранилище.

const inputWriteTask = document.querySelector("input"),
    buttonAddTask = document.querySelector("button"),
    containerTasks = document.querySelector(".container-tasks");

let arrayOfTasks = [];

function buttonAddtasksToArray() {
    if (inputWriteTask.value != "") {
        addValueInput(inputWriteTask.value);
        inputWriteTask.value = "";
    };
};

buttonAddTask.addEventListener("click", buttonAddtasksToArray);

function addValueInput(text) {
    const task = {
        id: Date.now(),
        title: text,
    };

    arrayOfTasks.push(task);
    console.info(arrayOfTasks);
    createTasks(arrayOfTasks);
    addDataToLocaleStorage(arrayOfTasks)
};

function createTasks(arrayOfTasks) {
    containerTasks.innerHTML = "";
    arrayOfTasks.forEach(task => {
        let div = document.createElement("div");
        div.className = "task";
        containerTasks.appendChild(div)

        let inputText = document.createElement("input")
        inputText.type = "text"
        inputText.setAttribute("value", task.title)
        inputText.setAttribute("readonly", "")

        let editButton = document.createElement("button");
        editButton.className = "edit-btn";
        editButton.appendChild(document.createTextNode("edit"))
        div.append(inputText, editButton)

        editButton.onclick = () => {
            inputText.removeAttribute("readonly");
            inputText.focus();
        };
    });
};

function addDataToLocaleStorage(arrayOfTasks) {
    window.localStorage.setItem("data-task", JSON.stringify(arrayOfTasks));
};

if (localStorage.getItem("data-task")) {
    arrayOfTasks = JSON.parse(localStorage["data-task"])
    createTasks(arrayOfTasks)
}

<!DOCTYPE html>
<html lang = "en">

    <head>
        <meta charset = "UTF-8">
        <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
        <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script defer src = "main.js"></script>
    </head>

    <body>
        <style>
            .container-tasks {
                display: grid;
                gap: 1em;
                margin-top: 1em;
            }

            .task {
                background-color: #ddd;
                padding: 1em;
                display: flex;
                justify-content: space-between;
            }

            .task input {
                border: none;
                outline: none;
                background-color: transparent;
            }
        </style>
        <input type = "text">
        <button>add task</button>
        <div class = "container-tasks">
        </div>
    </body>

</html>

javascript html css reactjs json

21.10.2022 00:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

function createTasks(arrayOfTasks) {
  containerTasks.innerHTML = "";
  arrayOfTasks.forEach((task, index) => {
    let div = document.createElement("div");
    div.className = "task";
    div.setAttribute("data-taskindex", index);
    containerTasks.appendChild(div);

...

И при размытии ввода передайте это значение индекса в addValueInput.

function addValueInput(text, index = -1) {
  const task = {
    id: Date.now(),
    title: text
  };

  if (index === -1) {
    arrayOfTasks.push(task);
  } else {
    arrayOfTasks[index] = task;
    // OR! If you whish to keep the original id (a date)
    // arrayOfTasks[index].title = text;
  }
  console.info(arrayOfTasks);
  createTasks(arrayOfTasks);
  addDataToLocaleStorage(arrayOfTasks);
}

Итак, если не было передано index... Он добавляет новую задачу в массив. И если он есть, он перезаписывает этот конкретный index вместо этого.

Вот обработчик события (находится в вашей функции createTasks):

inputText.addEventListener("blur", (event) => {
  let index = event.target.closest("div").dataset.taskindex;
  console.info(`The task at index # ${index} was modified.`);
  addValueInput(event.target.value, index);
});

Поскольку localStorage здесь запрещено, взгляните на этот CodePen

21.10.2022 04:53

Другие вопросы по теме

Как избавиться от небольшого белого перелива внизу моего сайта?

Изменить элемент attr с помощью javascript

Как визуализировать SVG-файл ForeignObject, закодированный с помощью Base64, в браузере

Как сделать липкий div в css?

Bootstrap 5 — плавающие метки с синтаксисом Razor

Как скрыть тег <a> при нажатии кнопки?

Почему атрибут crossorigin важен для ссылок перед подключением?

Ссылка на разделитель стилей между изображениями в CSS

Показывать кнопки только в определенную дату

Стимул построить html-элемент из остального API

Как изменить значение объекта локального хранилища

Ответы 1

Другие вопросы по теме

Похожие вопросы