javascript - 在刷新页面上保留数据

Question

我想在页面刷新之前保留目标有序列表的数据，然后在准备好文档时使用 jquery 将其添加到前面。这是我的代码

// if an refresh event is fired
window.onbeforeunload = function(event){
  //store the messages into sessionStorage
  sessionStorage.setItem('ol', jQuery('#messages'));
  return undefined;
};
$(document).ready(function(){
  if (sessionStorage.getItem('ol')) {
  // Restore the contents of the ol (message contents)
    var ol = sessionStorage.getItem('ol');
    jQuery('#messages').html(ol);
  }
});

<div class="chat__main">

    <ol id="messages" class="chat__messages"></ol>

    <div class="chat__footer">
      <form id="message-form" action="">
        <input type="text" name="message" placeholder="Message" autofocus autocomplete="off"/>
        <button>Send</button>
      </form>
      <button id="send-location"> Send location</button>
    </div>
  </div>

但是刷新后代码并没有按预期运行，结果是 enter image description here

虽然刷新前是 enter image description here

Answer 1

您需要使用 localStorage 因为存储在 localStorage 中的数据会一直存在，直到被明确删除。所做的更改将被保存并可供所有当前和将来访问该网站时使用。

对于 sessionStorage，更改仅适用于每个窗口(或 Chrome 和 Firefox 等浏览器中的选项卡)。所做的更改将被保存并可用于当前页面，以及将来在同一窗口中访问该站点。窗口关闭后，存储将被删除。

有关此链接的更多详细信息 https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage