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

使用Ajax从localStorage获取数据

1 个答案: