Использование локального хранилища для постоянного добавления введенных пользователем строк в HTML

#javascript #html #html-table #local-storage

#javascript #HTML #html-таблица #local-storage

Вопрос:

Я создаю веб-сайт, который принимает два входных данных: тему и ссылку, и добавляет их в виде строки в таблицу HTML. При нажатии кнопки » » он должен выполнить необходимое. Я хотел использовать локальное хранилище, чтобы постоянно хранить эти ссылки и разделы на странице. Поскольку я новичок в концепции локального хранилища, буду признателен за любую помощь.

Это мой фрагмент кода:

 let table = document.querySelector('table');
let topicInput = document.querySelector('#topic');
let linkInput = document.querySelector('#link');

function getTopic () {
    return localStorage.getItem("mytopic");
}

function getLink () {
    return localStorage.getItem("mylink");
}

function updatePage () {
    let topic = topicInput.value;
    let link = linkInput.value;
    let template = `
    <tr>
        <td>${topic}</td>
        <td>${link}</td>
        <td><input type="button" id="buttonDelete" value="-" onclick="deleteRow(this)"></td>
    </tr>`;
    table.innerHTML  = template;
}

function addFunction () {
    var rTopic = document.getElementbyId("topic").value;
    var rLink = document.getElementbyId("link").value;

    localStorage.setItem("mytopic", rTopic);
    localStorage.setItem("mylink", rLink);

    updatePage();
};

 <input type="text" id="topic" placeholder="Add topic" size="50">
<input type="text" id="link" placeholder="Add link" size="50">
<button id="buttonAdd" onclick="addFunction()"> </button>

1. Я не думаю, что вы можете использовать JavaScript или HTML для доступа к локальному хранилищу. Вы должны использовать AJAX (это js, отправляющий данные на серверную часть), а затем серверную программу (php, deno …) для извлечения некоторых данных, которые вы можете отобразить (через js) в HTML. Полезно ли это?

2. И каким образом ваш код работает не так, как ожидалось? Вы получаете сообщение об ошибке в консоли браузера?

3. @JonNezbit: JavaScript действительно можно использовать для доступа localStorage .

4. @David Я думаю, что он имел в виду локальное хранилище в виде файла на сервере, но, возможно, я ошибаюсь в этом

5. Вы неправильно написали это -> getElementbyId , это должно быть getElementById (это слово By )

Ответ №1:

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

 const table = document.querySelector('table tbody');
const topicInput = document.querySelector('#topic');
const linkInput = document.querySelector('#link');

// grab the records from local storage.
const records = JSON.parse(localStorage.getItem("data") || '[]');
const rowIndex = 0;

function addRecord(topic, link) {
  const template = `
        <tr>
            <td>${topic}</td>
            <td>${link}</td>
            <td><input type="button" class="buttonDelete" value="-"></td>
        </tr>`;
  table.innerHTML  = template;
}

function addFunction() {
  const rTopic = document.getElementById("topic").value;
  const rLink = document.getElementById("link").value;
  // add to the array
  records.push({
    topic: rTopic,
    link: rLink
  });
  updateLocalStorage();
  addRecord(rTopic, rLink);
};

function updateLocalStorage() {
  // save updated records array
  localStorage.setItem("data", JSON.stringify(records));
}

table.addEventListener("click", function (evt) {
  const delButton = evt.target.closest(".buttonDelete");
  if (delButton) {
     const row = delButton.closest("tr");
     const index = Array.from(row.parentNode.children).indexOf(row);
     records.splice(index, 1);
     row.remove();
     updateLocalStorage();
  }
})

// loop over the records in localstorage.
records.forEach(function(record) {
  addRecord(record.topic, record.link);
});

 <input type="text" id="topic" placeholder="Add topic" size="50">
<input type="text" id="link" placeholder="Add link" size="50">
<button id="buttonAdd" onclick="addFunction()"> </button>
<table>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

И, как я уже говорил ранее, localstorage не является постоянным. Его можно легко очистить, и он также ограничен объемом данных, которые он может хранить.