Получить данные из localStorage с помощью ajax

Question

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

У меня есть функция, которая просто создает эту таблицу, используя данные из локального хранилища:

function get_table(links) {
    let result = ["<table class='table text-center'>"];
    let number = recent.length;

    result.push("<thead><tr><th scope='col'>Page Number</th><th scope='col'>Link</th></tr></thead>")
    result.push("<tbody>")
    for(let link of links) {
        result.push(`<tr><td>${number}</td><td>${link}</td></tr>`);
        number--;
    }
    result.push("</tbody></table>");
    return result.join('\n');
  }

Но я не знаю, где применить AJAX.Я пытался сделать это:

$.ajax({
      type: "POST",
      url: "http://127.0.0.1:8000",
      data: {recent: localStorage.getItem('RecentPages')},
      dataType: 'json',
      success: function(data)
      {
          $('.container').append(get_table(data));

      },
  });

Но это не работает.Как мне достичь своей цели?

Answer 1

Существует способ добавить ваши новые данные в таблицу, не переписывая их.Я искал обратный вызов или событие, которое нужно получить, когда Array.push происходит, но этого не происходит.

function ArrayEvent(array){
this.Array = array;
this.push = function(data){
    //push the data in the array
    this.Array.push(data);

    //store it in the local storage
    localStorage.setItem("links", JSON.stringify(this.Array));

    //add to the end of the table
    $("table.table > tbody").append(`<tr><td>${data.number}</td><td>${data.link}</td></tr>`);
};

}

Если вам это не нравится, вы также можете попробоватьProxy: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy