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

Answer 2

谢谢@charlietfl这对我有用

// if an refresh event is fired
window.onbeforeunload = function(event){
  //store the messages into sessionStorage
  sessionStorage.setItem('ol', jQuery('#messages').html());
  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);
  }
});

刷新时在页面上保留数据

2 个答案: