您能否保留使用 ajax 的页面的动态内容，以便在用户返回时恢复？

我会建议你使用localStorage这个具有相当好的存储容量。您仅限于其中的字符串，因此您需要将所有内容与 JSON 相互转换以获得最佳结果。你存储什么取决于你。我将创建一个具有各种属性的对象，例如当前滚动高度、上次请求的索引和一个数组，其中包含您到目前为止从 AJAX 中提取的所有内容（以及您在页面加载时创建的所有内容）。如果您要在多个页面上使用此逻辑，或者只是更改每页的键，您可能还想存储它所在的页面。但是，如果您共享一个密钥，您也可以完全跳过对您已经拥有的数据的 AJAX 调用，并且您认为自己的业务逻辑是“新鲜的”。下面是一些示例代码。如果您按下开始按钮并让它运行几秒钟，您将看到列表随着时间戳而增长。如果您随后刷新页面，所有内容仍将存在。首先，一些 HTML 让我们工作，一个开始和停止的按钮以及我们将写入的列表。<button id="start">Start</button><button id="stop">Stop</button><ul id="list"></ul>然后是 JS，内联注释应该可以解释一切：// This is the interval key, used when stopping the interval codelet iv;const cache_key = 'my-cache-key';function stop() { window.clearInterval( iv );}function start() { iv = window.setInterval( tick, 1000 );}function makeLi( text ) { const li = document.createElement( 'li' ); li.appendChild( document.createTextNode( text ) ); return li;}// Run once a secondfunction tick() { // Create a timestamp const ts = new Date().getTime(); // Store it to local session store( ts ); // Append to our list const ul = document.getElementById( 'list' ); ul.appendChild( makeLi( ts ) );}function store( text ) { // See if we have our key let items = window.localStorage.getItem( cache_key ); // Parse it as JSON or set it to an empty array to start if ( items ) { items = JSON.parse( items ); } else { items = []; } // Append our current key items.push( text ); // Push it back window.localStorage.setItem( cache_key, JSON.stringify( items ) );}// One page load, recreate all itemsfunction load() { const ul = document.getElementById( 'list' ); let items = window.localStorage.getItem( cache_key ); if ( !items ) { return; } items = JSON.parse( items ); items .forEach( ( item ) => { ul.appendChild( makeLi( item ) ) } );}// Click handlers for the buttondocument.getElementById( 'start' ).addEventListener( 'click', start );document.getElementById( 'stop' ).addEventListener( 'click', stop );// Reload anything previously stored on page refreshwindow.addEventListener( 'load', load );至于你在本地存储中存储什么，这取决于。如果您的 DOM 很复杂但很短，您可以存储它outerHTML的，但这有点难看。相反，我会存储您从 AJAX 收到的用于创建对象的最少字段数。此外，无论您存储什么，我都建议在您的对象上有一个名为“版本”之类的属性，并且每当您向 AJAX 逻辑引入新功能时手动增加它。这样，如果有人带着不再有意义的数据返回您的页面，您的应用程序可以检测到它并将其丢弃。这个示例应用程序存储一个非常简单的数组，但就像我说的，您可能想要存储一个对象并且您还想要执行验证和清理，就像您在 AJAX 中所做的那样。编辑我还应该补充一点，您需要确保您的图像等资源在未来缓存过期，以便从本地缓存中获得额外的站点速度。根据我的评论，这个网站（已有 4 年历史）表示 97.6% 的人启用了本地存储，所以我绝对会使用它，因为降级只是“最新的”，这仍然是一个不错的体验。如果您在参考站点上打开您的开发人员工具，您可以检查本地存储的应用程序部分，您会在那里找到我正在谈论的版本。

您能否保留使用 ajax 的页面的动态内容，以便在用户返回时恢复？

2回答