Get data from localStorage with ajax

Question

I have an array that consists of some links, this array is stored in localStorage. I have a page where I want to display all of them. So when I append any item to my array, it has to be added to the page using ajax.

I have a function that just creates this table using data from local storage:

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');
  }

But I don't know where to apply ajax. I tried doing so:

$.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));

      },
  });

But it doesn't work. How can I achieve my goal?

Answer 1

There's an approach to add your new data to the table without re write it. I was looking for a callback or event to get when Array.push happen but there isn't.

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>`);
};

}

If you don't like it, you could also try with Proxy : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy