Я бы порекомендовал вам использовать localStorage для этого, который имеет довольно хороший объем памяти .
Вы ограничены строками в нем, поэтому вы ' Для достижения наилучших результатов вам нужно будет преобразовать все в JSON.
Что вы храните, зависит от вас. Я бы создал объект с различными свойствами, такими как текущая высота прокрутки, последний запрошенный индекс и массив, содержащий все, что вы извлекли из AJAX до сих пор (а также все, что вы создали при загрузке страницы). Вы также можете захотеть сохранить, на какой странице это находится, если вы собираетесь использовать этот logi c на нескольких страницах, или просто изменить ключ для каждой страницы. Однако, если вы делитесь ключом, вы также можете полностью пропустить AJAX вызовы данных, которые у вас уже есть и которые вы считаете «fre sh» вашим собственным бизнес-логом c.
Ниже это пример кода. Если вы нажмете кнопку «Пуск» и дадите ей поработать пару секунд, вы увидите, что список увеличивается с отметками времени. Если вы затем обновите sh страницу, все по-прежнему будет на ней.
Во-первых, немного HTML, чтобы мы работали, кнопка для запуска и остановки, а также список, который мы будем писать to.
<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 code
let 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 second
function 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 items
function 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 button
document.getElementById( 'start' ).addEventListener( 'click', start );
document.getElementById( 'stop' ).addEventListener( 'click', stop );
// Reload anything previously stored on page refresh
window.addEventListener( 'load', load );
Что касается того, что вы храните в локальном хранилище, это зависит. Если ваш DOM сложный, но короткий, вы могли бы сохранить его outerHTML, но это немного некрасиво. Вместо этого я бы сохранил минимальное количество полей, которые вы получаете от AJAX, которые вам нужно использовать для создания объектов.
Кроме того, для всего, что вы храните, я бы рекомендовал иметь свойство вашего объекта с именем что-то вроде "версии", и всякий раз, когда вы вводите новую функцию в свой AJAX logi c, увеличивайте ее вручную. Таким образом, если кто-то вернется на вашу страницу с данными, которые больше не имеют смысла, ваше приложение сможет их обнаружить и выбросить.
В этом примере приложения хранится очень простой массив, но, как я уже сказал, вы вы, вероятно, захотите сохранить объект, и вы также захотите выполнить проверку и очистку, как вы это делаете в AJAX.
edit
Я также должен добавьте, вы захотите убедиться, что у вас истекает срок действия кеша в далеком будущем на ресурсах, таких как изображения, чтобы получить дополнительную скорость сайта за счет локального кеширования.
Из моего комментария этот сайт (которому 4 года) говорит, что 97,6% людей включили локальное хранилище, поэтому я бы обязательно использовал это, поскольку переход на более раннюю версию - это просто «только самая последняя версия», что все равно неплохой опыт.
Если вы открываете инструменты разработчика на своих справочных сайтах, вы можете проверить раздел приложения на предмет локального хранилища и найти там версию того, о чем я говорю.