localStorage.getItem() — прочитати значення зі сховища

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

getItem — це метод, який дозволяє отримати значення, збережене в сховищі браузера за вказаним ключем. Він є частиною інтерфейсу localStorage або sessionStorage, який використовується для зберігання даних на стороні клієнта. Метод приймає один аргумент — key, який є рядком, що вказує на назву елемента, дані якого необхідно отримати. Якщо елемент із заданим ключем не існує, метод повертає null.

Використання

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

Приклад використання:

// Збережемо деякі дані в localStorage
localStorage.setItem('username', 'JohnDoe');

// Отримаємо ці дані
let username = localStorage.getItem('username');
console.log(username); // Виведе "JohnDoe"

У цьому прикладі ми зберігаємо значення під ключем 'username' за допомогою методу setItem, а потім отримуємо його за допомогою методу getItem.

Особливості та обмеження

• Якщо ключ не існує, метод поверне null. Це може призвести до непотрібних помилок, якщо програма не перевіряє значення перед використанням.
• Дані, що зберігаються в сховищах, зберігаються як рядки. Тому, якщо потрібно зберегти складні типи даних (наприклад, об'єкти або масиви), їх потрібно попередньо перетворити в рядки за допомогою JSON.stringify і потім розпарсити через JSON.parse при отриманні.

Приклад з перетворенням:

// Зберігаємо об'єкт як рядок
const user = { name: "John", age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Отримуємо об'єкт з localStorage
let userData = localStorage.getItem('user');
userData = JSON.parse(userData);
console.log(userData.name); // Виведе "John"

У цьому прикладі об'єкт перед збереженням перетворюється на рядок, а після отримання — розпарсений назад у об'єкт.

правити

Порада

Якщо ви працюєте з великими обсягами даних, краще використовувати механізм кешування, щоб зменшити кількість запитів до сховища. Наприклад, отримуючи великі дані, можна зберігати їх у змінних для подальшого використання, а не запитувати сховище щоразу.

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

Порада

При використанні об'єктів або масивів у localStorage, пам'ятайте, що ви не можете безпосередньо зберігати несеріалізовані структури даних. Тому перед тим як зберігати складні типи, обов'язково перетворюйте їх у рядки за допомогою JSON.stringify.

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

Порада

Пам'ятайте, що дані з sessionStorage зберігаються лише до закриття вкладки або вікна браузера, тому, якщо потрібно зберігати дані між сесіями, використовуйте localStorage.

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

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

Синтаксис

storage.getItem(key);

Повернення

value

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

Переглядач
	1.10

Приклади

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

<header>
  <h2 class="title">Збереження налаштувань користувача</h2>
  <p class="description">Цей приклад демонструє використання getItem для відображення збережених даних.</p>
</header>
<main>
  <div class="result">
    <label for="username">Введіть ваше ім'я:</label>
    <input type="text" id="username" placeholder="Напишіть ім'я">
    <button id="saveBtn">Зберегти ім'я</button>
    <button id="loadBtn">Завантажити ім'я</button>
    <p id="greeting"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  margin-top: 10px;
}

// Функція для збереження імені в localStorage
document.getElementById('saveBtn').addEventListener('click', function () {
  const username = document.getElementById('username').value;
  localStorage.setItem('username', username);
  alert('Ім\'я збережено!');
});

// Функція для завантаження імені з localStorage
document.getElementById('loadBtn').addEventListener('click', function () {
  const savedUsername = localStorage.getItem('username');
  if (savedUsername) {
    document.getElementById('greeting').textContent = `Привіт, ${savedUsername}!`;
  } else {
    document.getElementById('greeting').textContent = 'Ім\'я не знайдено.';
  }
});
//# sourceURL=pen.js

// Зберігаємо токен авторизації
const authToken = '12345abcdef';
localStorage.setItem('authToken', authToken);

// Перевіряємо, чи є токен і авторизуємо користувача
let token = localStorage.getItem('authToken');
if (token) {
    console.log('Користувач авторизований');
} else {
    console.log('Користувач не авторизований');
}

// Зберігаємо налаштування теми
const themeSettings = { theme: 'dark', fontSize: '16px' };
localStorage.setItem('themeSettings', JSON.stringify(themeSettings));

// Отримуємо налаштування при завантаженні сторінки
let savedSettings = localStorage.getItem('themeSettings');
if (savedSettings) {
    savedSettings = JSON.parse(savedSettings);
    console.log(savedSettings.theme); // Виведе "dark"
}