JS метод Storage.setItem()

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

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

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

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

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

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

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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

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

Синтаксис

storage.setItem(key, value);

Повернення

undefined

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

автор: Bond

правити

Переглядачі

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

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

Переглядач
	4	3.5	4	10.5	12

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

Переглядач
	37	18	6	3.2

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

Переглядач
	-	1.10

Приклади

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

<input type="text" id="name" value="текст для прикладу" placeholder="Введи щось">
<input type="email" id="email" value="[email protected]" placeholder="Введи щось">
<button id="saveBtn">Зберегти</button>

// Зберігання даних форми на час сесії
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);

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

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