添加除 location.reload 以外的数据时，如何将其打印出来用于本地存储？

Question

我用localstorage存储数据。 但我有这样的问题。 添加新数据时，该数据在刷新页面之前不会出现。

那么，当添加除 location.reload 以外的数据时，如何将其打印出来用于本地存储？

// 添加按钮

                    <a style="cursor: pointer;" class="text-secondary  no-decoration" id="bookmark" data-id="<?= $this->detail->id; ?>" data-url="<?= $this->detail->articles_sef_link; ?>" data-date="<?= H::timeConvert($this->detail->created_at); ?>" data-title="<?= $this->detail->articles_title; ?>" data-img="<?= $this->detail->url; ?>" data-user="<?= $this->detail->fname;?> <?= $this->detail->lname; ?>" data-tooltip="Okunmadı olarak işaretle" data-tooltip-location="bottom"><i class="far fa-flag" style="font-size: 21px"></i></a>

// 添加标记为阅读列表 $('#bookmark').click(function(){

$('#iconHidden').hide();
$('#iconShow').show();

    // Get Information articles
    let id         = $(this).data("id");
    let sef_link   = $(this).data("url");
    let created_at = $(this).data("date");
    let title      = $(this).data("title");
    let img        = $(this).data("img");
    let fullname   = $(this).data("user");


    array_item.push({id,sef_link,created_at,title,img,fullname});
    localStorage.setItem("array_item", JSON.stringify(array_item));
    location.reload();


    //console.log(array_item);

});

Answer 1

Codepen： Codepen 示例：使用本地存储的动态内容

这是一个代码示例。 有三个按钮可以将新书签添加到本地存储。 第四个按钮清除存储。

书签在表格中动态列出。

单击按钮后，函数addData被调用。 此函数将新书签添加到本地存储。 之后，此函数调用另一个函数updateTable 。 updateTable更新表格内容（具有 id content元素）。 为此，它遍历bookmark数组并调用addTableRow ，它为所有书签向表体添加一个新的表行。

请注意：在此解决方案中，我在向本地存储添加新书签时清除了表格内容。 但这取决于您的具体需求。 您也可以简单地将新添加的书签附加到表格中，而不是删除旧内容并重新绘制完整的书签数组。

HTML：

<button onclick="button1()">Add bookmark 1</button>
<button onclick="button2()">Add bookmark 2</button>
<button onclick="button3()">Add bookmark 3</button>
<button onclick="clearLocalStorage()">Clear local storage</button>

<table>
  <thead>
    <tr>
      <td>Created</td>
      <td>Link</td>
      <td>Title</td>
    </tr>
  </thead>
  <tbody id="content">
    <!-- Dynamic content -->
  </tbody>
</table>

CSS：

table{
  margin-top: 40px;
  background: #dedede;
}

td{
  min-width: 100px;
}

thead > tr > td{
  font-weight:  bold;
}

JS：

function button1(){
  addData('01.01.1980', 'my-page.com', 'My page');
}
function button2(){
  addData('03.09.1990', 'your-page.com', 'Your page');
}
function button3(){
  addData('04.11.2010', 'our-page.com', 'Our page');
}

function clearLocalStorage(){
  localStorage.setItem("bookmarks", JSON.stringify([]));
  updateTable();
}

function addData(created, link, title){
  // Get bookmarks
  let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  // When this object do not exist, create a new array
  if(bookmarks === undefined || bookmarks === null) bookmarks = new Array();
  console.log(bookmarks);
  bookmarks.push({created, link, title});
  // Save the new bookmark in the local storage
  localStorage.setItem("bookmarks", JSON.stringify(bookmarks));
  // Update the table which displays the bookmarks
  updateTable();
}

function updateTable(){
  // Get all bookmarks of the local storage
  let bookmarks = JSON.parse(localStorage.getItem("bookmarks"));
  console.log(bookmarks);
  // Get the DOM element which displays the bookmarks dynamically
  let content = document.getElementById('content');
  // Delete the current content
  content.innerHTML = '';
  // Iterate through the bookmark array and call the function
  // "addTableRow" for alle element in the array.
  bookmarks.forEach(bookmark => {
    addTableRow(content, bookmark);
  });
}

function addTableRow(content, data){
  // Create a new table row
  let newRow = document.createElement('tr');
  // Create new table cells
  let created = document.createElement('td');
  created.innerHTML = data.created;
  let link = document.createElement('td');
  link.innerHTML = data.link;
  let title = document.createElement('td');
  title.innerHTML = data.title;
  // Append the table cells to the row
  newRow.appendChild(created);
  newRow.appendChild(link);
  newRow.appendChild(title);
  // Append the table row to the content
  content.appendChild(newRow);
}