JavaScript window.history — історія переходів браузера

Об'єкт history дає доступ до історії переходів вкладки: назад, вперед і — найцікавіше — зміна адреси без перезавантаження.

правити

Загальний опис

Методи back() і forward() роблять те саме, що кнопки браузера.

Але по-справжньому важливий тут pushState(). Він змінює адресу в рядку браузера, не перезавантажуючи сторінку — і саме на цьому побудовані всі односторінкові застосунки: вміст підмінюється кодом, а адреса лишається чесною, її можна скопіювати й надіслати.

Коли користувач тисне «Назад», спрацьовує подія popstate — і застосунок має сам відновити попередній стан. Забув обробник — і кнопка «Назад» просто перестане працювати, що бісить людей найбільше.

replaceState() не додає запис, а замінює поточний — зручно, коли міняється лише фільтр, і засмічувати історію не варто.

правити

Нотатка

З міркувань приватності прочитати історію не можна: не існує способу дізнатись, де користувач був раніше. Доступна лише довжина — history.length.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

function render(page) {
    console.log('Малюємо сторінку', page);
}

try {
    // змінили адресу, сторінку не перезавантажили
    history.pushState({ page: 2 }, '', '?page=2');

    // без цього обробника кнопка «Назад» зламається
    window.addEventListener('popstate', event => {
        const page = (event.state && event.state.page) || 1;
        render(page);
    });

    // фільтр змінився — історію не засмічуємо
    history.replaceState({ page: 2, sort: 'new' }, '', '?page=2&sort=new');

    history.back(); // як кнопка «Назад»
} catch (error) {
    console.log('У пісочниці зміна історії заборонена:', error.name);
}