51. 📌 Что такое localStorage и sessionStorage?
💬 Это способы хранения данных в браузере. Позволяют сохранять информацию между обновлениями страницы.
🛠 Отличия:
- localStorage — данные сохраняются даже после закрытия браузера
- sessionStorage — данные сохраняются только пока открыт таб
🧪 Пример:
localStorage.setItem('user', 'Оля');
console.log(localStorage.getItem('user')); // "Оля"
localStorage.removeItem('user');
💡 Под капотом всё хранится в виде строк. Если сохраняешь объект — используй JSON.stringify().
52. 📌 Как работают cookies?
💬 Cookies — это маленькие данные, которые сохраняются в браузере и могут отправляться на сервер.
🛠 Как задать:
document.cookie = "username=Анна; path=/; max-age=3600";
🧪 Пример чтения:
console.log(document.cookie); // "username=Анна"
💡 У cookies есть ограничения по размеру и количеству. Они видны серверу при запросах (если не HttpOnly).
53. 📌 Как получить элемент со страницы?
💬 DOM-элементы можно получать с помощью встроенных методов.
🛠 Способы:
- getElementById
- querySelector
- querySelectorAll
🧪 Пример:
const el = document.querySelector('.btn');
const input = document.getElementById('email');
💡 querySelector — самый универсальный, можно использовать любые CSS-селекторы.
54. 📌 Как добавить элемент в DOM?
💬 В JavaScript можно динамически создавать и вставлять элементы на страницу.
🛠 Пример:
const div = document.createElement('div');
div.textContent = 'Привет!';
document.body.appendChild(div);
💡 Элемент сначала создаётся в памяти, и только потом вставляется на страницу.
55. 📌 Как добавить обработчик событий?
💬 Обработчик — это функция, которая вызывается при наступлении события (например, клик мыши).
🛠 Пример:
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
console.log('Клик!');
});
💡 Можно добавить несколько обработчиков одного типа на один элемент.
56. 📌 Как удалить обработчик событий?
💬 Чтобы удалить обработчик, нужно передать ту же самую функцию, что и при добавлении.
🛠 Пример:
function handleClick() {
console.log('Клик!');
}
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);
💡 Анонимные функции удалить нельзя, их нужно выносить отдельно.
57. 📌 Что такое DOMContentLoaded?
💬 Это событие, которое возникает, когда HTML полностью загружен и разобран, но до загрузки картинок и стилей.
🛠 Пример:
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM готов!');
});
💡 Используется, если нужно быть уверенным, что все элементы уже есть в DOM перед манипуляциями.
58. 📌 Как работает fetch()?
💬 fetch() — это способ делать HTTP-запросы (например, на сервер).
🛠 Пример:
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data));
💡 По умолчанию fetch не выбрасывает ошибку при 404 или 500 — только при сетевой ошибке.
59. 📌 Как отправить данные методом POST?
💬 Используем fetch() и указываем метод POST, заголовки и тело запроса.
🛠 Пример:
fetch('/api/submit', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: 'Оля' })
})
.then(res => res.json())
.then(data => console.log(data));
💡 Всегда нужно сериализовать тело запроса в JSON.
60. 📌 Как получить параметры из URL?
💬 Если в адресной строке есть параметры (?key=value), их можно прочитать с помощью URLSearchParams.
🛠 Пример:
const params = new URLSearchParams(window.location.search);
console.log(params.get('name')); // например, ?name=Анна → "Анна"
💡 Можно перебирать все параметры:
for (const [key, value] of params) {
console.log(`${key} = ${value}`);
}