В веб-разработке существуют различные методы передачи данных между веб-страницами. Один из популярных подходов — использование свойства window.location.href, которое позволяет перейти к новому URL-адресу и передать вместе с ним данные. В этой статье мы рассмотрим различные методы и предоставим примеры кода, демонстрирующие отправку данных с помощью window.location.href.

Метод 1: параметры запроса
Один из самых простых способов отправки данных — добавление их в качестве параметров запроса к URL-адресу. Этот метод широко используется и поддерживается всеми браузерами. Вот пример:

const data = {
  name: 'John',
  age: 25,
};
const url = 'https://example.com/destination-page?' + new URLSearchParams(data);
window.location.href = url;

Метод 2: Параметры хеширования
Другой метод – передача данных в виде параметров хеширования. Параметры хеша добавляются к URL-адресу после символа решетки (#) и часто используются для навигации по страницам. Вот пример:

const data = {
  category: 'books',
  filter: 'best-sellers',
};
const url = 'https://example.com/destination-page#' + encodeURIComponent(JSON.stringify(data));
window.location.href = url;

Метод 3: локальное хранилище
Если вам нужно отправить большие объемы данных или сложные объекты, вы можете сохранить данные в локальном хранилище браузера и получить их на целевой странице. Вот пример:

const data = {
  id: 123,
  product: 'Laptop',
};
localStorage.setItem('data', JSON.stringify(data));
window.location.href = 'https://example.com/destination-page';

На целевой странице:

const data = JSON.parse(localStorage.getItem('data'));
localStorage.removeItem('data');
// Use the data as needed

Метод 4: хранилище сеансов
Подобно локальному хранилищу, вы также можете использовать хранилище сеансов для отправки данных между страницами. Данные, хранящиеся в хранилище сеанса, будут доступны до завершения сеанса браузера. Вот пример:

const data = {
  username: 'user123',
  role: 'admin',
};
sessionStorage.setItem('data', JSON.stringify(data));
window.location.href = 'https://example.com/destination-page';

На целевой странице:

const data = JSON.parse(sessionStorage.getItem('data'));
sessionStorage.removeItem('data');
// Use the data as needed

Используя свойство window.location.href, вы можете легко пересылать данные между веб-страницами. В этой статье мы рассмотрели несколько методов, включая параметры запроса, параметры хеширования, локальное хранилище и хранилище сеансов. Каждый метод предлагает различные преимущества в зависимости от размера и характера передаваемых данных. Понимая эти методы, вы сможете улучшить свои проекты веб-разработки и создать динамичный и интерактивный пользовательский интерфейс.

Не забудьте выбрать метод, который лучше всего соответствует вашим конкретным требованиям, а также учитывать безопасность и проверку данных при обработке вводимых пользователем данных.