Location Object - Керування адресою сторінки

Вступ

У веб-розробці часто виникає потреба програмно керувати адресою сторінки: перенаправити користувача на сторінку входу, оновити контент без дій користувача або отримати параметри з URL для фільтрації товарів.

Для цього браузер надає глобальний об'єкт window.location (або просто location). Це спеціальний об'єкт, який містить повну інформацію про поточний URL документа та надає методи для навігації.

Що ми навчимося робити?

• Отримувати окремі частини адреси (домен, шлях, хеш)
• Перенаправляти користувача з збереженням історії та без
• Перезавантажувати сторінку програмно
• Безпечно маніпулювати адресою

Структура Location

Об'єкт location автоматично розбирає поточну адресу на складові частини.

graph LR
    URL["https://site.com:8080/path/page?q=search#hash"]

    subgraph Protocol
    P["location.protocol<br>https:"]
    end

    subgraph Host
    H["location.host<br>site.com:8080"]
    HN["location.hostname<br>site.com"]
    Port["location.port<br>8080"]
    end

    subgraph Path
    PathName["location.pathname<br>/path/page"]
    end

    subgraph Search
    S["location.search<br>?q=search"]
    end

    subgraph Hash
    Ha["location.hash<br>#hash"]
    end

    URL --> P
    URL --> H
    H --> HN
    H --> Port
    URL --> PathName
    URL --> S
    URL --> Ha

Основні властивості

Всі властивості location (крім origin) доступні для запису. Зміна будь-якої з них призведе до негайного оновлення сторінки або навігації.

Приклад читання властивостей

// Поточний URL: https://example.com/blog/article?id=42#comments

console.log(location.href)     // "https://example.com/blog/article?id=42#comments"
console.log(location.origin)   // "https://example.com"
console.log(location.pathname) // "/blog/article"
console.log(location.search)   // "?id=42"
console.log(location.hash)     // "#comments"

Методи навігації

Крім прямаго запису у location.href, існують спеціальні методи для більш точного керування навігацією.

1. location.assign(url)

Цей метод завантажує новий документ за вказаною URL-адресою.

• Дія: Перехід на нову сторінку.
• Історія: Зберігає поточну сторінку в історії браузера. Користувач може натиснути кнопку "Назад", щоб повернутися.

// Перехід на головну Google
location.assign('https://google.com')

2. location.replace(url)

Замінює поточний документ новим.

• Дія: Перехід на нову сторінку.
• Історія: НЕ зберігає поточну сторінку в історії. Блокує можливість повернутися назад.

// Користувач не зможе повернутися на попередню сторінку
location.replace('https://google.com')

Коли використовувати? Ідеально підходить для редіректів після логіну, або коли сторінка, на якій зараз знаходиться користувач, більше не актуальна (наприклад, проміжна сторінка оплати).

3. location.reload()

Перезавантажує поточну сторінку.

• Стандартно: location.reload() — перезавантажує, використовуючи кеш браузера (якщо він валідний).
• Примусово: У старих браузерах передавали true, щоб ігнорувати кеш, але в сучасному стандарті цей аргумент ігнорується. Для "жорсткого" перезавантаження часто покладаються на заголовки сервера або мета-теги.

// Перезавантажити сторінку
location.reload()

Практичні сценарії

Перенаправлення користувача

Найпоширеніша задача — редірект. Наприклад, якщо користувач не авторизований.

function checkAuth() {
    const isAuthorized = Boolean(localStorage.getItem('token'))

    if (!isAuthorized) {
        // Використовуємо replace, щоб користувач не міг повернутися
        // на захищену сторінку кнопкою "Назад"
        location.replace('/login')
    }
}

Отримання параметрів URL

Хоча location.search повертає просто рядок, його зручно використовувати разом з URLSearchParams.

// URL: https://shop.com/search?q=iphone&sort=price

const params = new URLSearchParams(location.search)

const query = params.get('q') // "iphone"
const sort = params.get('sort') // "price"

console.log(`Пошук: ${query}, Сортування: ${sort}`)

Зміна частини URL без повного переходу

Можна змінювати окремі властивості, наприклад hash. Це часто використовується в SPA (Single Page Applications) або для навігації по сторінці, і не викликає перезавантаження сторінки (тільки подія hashchange).

// URL: https://site.com/page
location.hash = 'footer'
// URL стане: https://site.com/page#footer
// Сторінка проскролиться до елемента з id="footer"

Але зміна search або pathname призведе до перезавантаження.

// Це перезавантажить сторінку!
location.search = '?lang=ua'

Порівняння методів навігації

Безпека

Будьте обережні при роботі з даними з location, особливо якщо виводите їх на сторінку.

// ❌ НЕБЕЗПЕЧНО!
// URL: site.com?name=<script>alert(1)</script>
document.body.innerHTML = `Привіт, ${new URLSearchParams(location.search).get('name')}`

// ✅ БЕЗПЕЧНО
document.body.textContent = `Привіт, ${new URLSearchParams(location.search).get('name')}`

Підсумки