当为本地存储添加 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(函数(){

$('#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 example: Dynamic content using local storage

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

书签在 table 中动态列出。

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

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

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

当为本地存储添加 location.reload 以外的数据时，如何打印出来？

How can I print it out when data is added other than location.reload for localstorage?

javascript

preload

local-storage