css.in.ua
Підтримати

Наповнення JS розділу

Добридень, Пані та Панове, завдяки вам вдалося зібрати більше 19тис грн з необхідних 15тис на впровадження JS розділу.

JS розділ вже впроваджено - переходимо до його наповнення і почнемо бігти довгий марафон, адже JS має більше 1100 різноманітних методів, властивостей, подій і т.д., які необхідно описати.

Будемо працювати, і вдень, і вночі, щоб орієнтовно взимку закінчити наповнювати JS розділ!

Ви також можете допомогти нам в цьому. Долучайтеся до нашої спільноти в дискорді - ставайте її частиною і допомагайте нашому розвитку.

Також, підтримуйте нас матеріально.

Підтримати матеріально

JS метод Storage.setItem()

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

setItem — це метод об'єкта Storage, який дозволяє зберігати дані в браузерному сховищі за допомогою пари ключ-значення. Це один з основних методів для роботи з localStorage та sessionStorage в JavaScript. Він дозволяє зберігати рядкові значення (як текст або числа), які зберігаються в браузері між сесіями (для localStorage) або до закриття вкладки (для sessionStorage).

Метод приймає два параметри:

  • key — це рядок, який вказує на унікальний ідентифікатор для збереженого елемента.
  • value — це значення, яке буде збережено. Воно повинно бути рядком, тому будь-який інший тип даних (масиви, об'єкти тощо) потрібно конвертувати в рядок перед збереженням за допомогою JSON.stringify().

Простий приклад:

localStorage.setItem("username", "Іван");

У цьому прикладі ми зберігаємо ім'я користувача "Іван" за ключем "username" в localStorage. Після виконання цієї операції, значення "Іван" буде збережено, і воно залишатиметься в сховищі, поки користувач не очистить його або не видалить вручну.

Порада:

При використанні setItem для зберігання складних даних, завжди перетворюйте їх на рядки за допомогою JSON.stringify(). Це дозволить зберігати масиви, об'єкти та інші типи даних без втрати інформації. Наприклад, зберігання списку продуктів виглядатиме так: 

let products = [{ id: 1, name: "Яблуко" }, { id: 2, name: "Банан" }];
localStorage.setItem("products", JSON.stringify(products));
Порада:

Пам'ятайте, що localStorage має обмеження за обсягом даних (зазвичай до 5 МБ). Якщо ви збираєте великі об'єми даних, переконайтеся, що не перевищите це обмеження, інакше буде викликана помилка.
Порада:

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

Синтаксис

storage.setItem(key, value);

Параметри

Return

undefined

Метод setItem з об'єкта Storage не повертає жодного значення. Він виконує дію збереження даних у локальному сховищі або сесії, але не надає ніякої відповіді. Це метод, який працює збереженням пари "ключ-значення", але після його виклику не відбувається повернення значення (не має return значення). Тобто він повертає undefined.

Переглядачі

Переглядач

4

3.5

4

10.5

12
Переглядач

37

18

6

3.2
Переглядач

-

1.10

Приклади


Цей приклад дозволяє користувачеві вибирати між світлою та темною темами для веб-сторінки. Налаштування зберігаються за допомогою методу localStorage.setItem, що дозволяє зберігати вибір користувача в локальному сховищі браузера. Коли сторінка перезавантажується або відкрита знову, тема зберігається і застосовується автоматично.

У цьому прикладі, користувач може перемикати чекбокс для вибору теми, після чого натискання кнопки "Застосувати налаштування" зберігає цей вибір у локальному сховищі. Сторінка автоматично оновлюється відповідно до вибору користувача і показує повідомлення про успішне застосування налаштувань.

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

// Зберігання налаштувань користувача для теми
function saveUserSettings(theme, fontSize) {
  const settings = { theme, fontSize };
  localStorage.setItem("userSettings", JSON.stringify(settings));
}

saveUserSettings("dark", "16px");

Цей приклад використовує sessionStorage для тимчасового зберігання даних форми під час заповнення. Це особливо корисно для запобігання втраті введених даних, якщо користувач випадково оновить сторінку або закриє вкладку.

// Зберігання даних форми на час сесії
function saveFormData() {
  const formData = {
    name: document.getElementById("name").value,
    email: document.getElementById("email").value,
  };
  sessionStorage.setItem("formData", JSON.stringify(formData));
}

document.getElementById("saveBtn").addEventListener("click", saveFormData);

Документи

Зв'язок