JS метод Storage.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"
У цьому прикладі об'єкт перед збереженням перетворюється на рядок, а після отримання — розпарсений назад у об'єкт.
| Порада: | Якщо ви працюєте з великими обсягами даних, краще використовувати механізм кешування, щоб зменшити кількість запитів до сховища. Наприклад, отримуючи великі дані, можна зберігати їх у змінних для подальшого використання, а не запитувати сховище щоразу. |
| Порада: | При використанні об'єктів або масивів у |
| Порада: | Пам'ятайте, що дані з |
Синтаксис
storage.getItem(key);Параметри
Return
valueМетод повертає значення, яке зберігається в локальному або сесійного сховищі за вказаним ключем. Якщо елемент з таким ключем не існує, метод повертає значення
null.
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
4 |
3.5 |
4 |
10.5 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
6 |
3.2 |
| Переглядач | ||
|---|---|---|
- |
1.10 |
Приклади
Цей приклад дозволяє користувачу ввести своє ім'я в текстове поле та зберегти його в localStorage за допомогою кнопки "Зберегти ім'я". Коли користувач натискає кнопку "Завантажити ім'я", система перевіряє, чи є дані в localStorage, і виводить привітальне повідомлення або повідомлення про те, що ім'я не знайдено.
Це дозволяє користувачеві зберігати налаштування (наприклад, ім'я або інші параметри) між сесіями, навіть якщо сторінка була перезавантажена.
Цей приклад демонструє, як зберігати налаштування користувача, такі як вибір теми і розмір шрифта, в localStorage. При наступному відвідуванні сторінки налаштування завантажуються і застосовуються, зберігаючи персоналізований досвід для користувача.
// Зберігаємо налаштування теми
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"
}У цьому прикладі ми використовуємо localStorage для зберігання токена авторизації, що дозволяє визначити, чи користувач вже авторизований під час наступного відвідування сторінки. Цей метод є важливим для збереження сеансів користувачів і зручності використання веб-додатків.
// Зберігаємо токен авторизації
const authToken = '12345abcdef';
localStorage.setItem('authToken', authToken);
// Перевіряємо, чи є токен і авторизуємо користувача
let token = localStorage.getItem('authToken');
if (token) {
console.log('Користувач авторизований');
} else {
console.log('Користувач не авторизований');
}