Уявіть, що ви працюєте над веб-додатком і вам потрібно зберегти якісь дані, наприклад, ім’я користувача, щоб використовувати їх пізніше. Зазвичай, якщо ви створите змінну в консолі браузера і оновите сторінку, ця змінна зникне — вона тимчасова. Це може бути неприємно, якщо вам потрібно, щоб ці дані зберігалися після перезавантаження сторінки. Ось тут на допомогу приходить Local Storage!
Що таке Local Storage?
Local Storage — це вбудована функція сучасних веб-браузерів, яка дозволяє зберігати пари ключ-значення безпосередньо в браузері. Це ніби маленька приватна база даних для вашого додатка, що знаходиться в браузері користувача. Найкраща частина? Дані, які ми зберігаємо в Local Storage, не зникають після оновлення сторінки або закриття браузера.
Воно залишатиметься там, поки ми не видалимо його вручну або користувач не очистить свої дані браузера.
Основні поняття:
- Пари ключ-значення (Key-Value Pairs): Local Storage зберігає дані у вигляді пар ключ-значення, де кожен ключ — це рядок, що унікально ідентифікує збережені дані, а значення — це самі дані (також збережені як рядок).
- Тривалість зберігання (Persistence): Дані, що зберігаються в Local Storage, зберігаються навіть після закриття браузера. Вони залишаються доступними, поки не будуть явно видалені або поки користувач не очистить свої дані браузера.
- Ємність пам'яті (Storage Capacity): Local Storage має більшу ємність пам'яті, ніж cookies (печиво). Ліміт змінюється в залежності від браузера, але зазвичай становить близько 5 МБ на один ресурс (домен).
- Безпека (Security): Local Storage доступний через JavaScript, що робить його вразливим до атак типу XSS (cross-site scripting). Тому чутливу інформацію не слід зберігати в Local Storage.
🗯️ Методи взаємодії з Local Storage:
1.
setItem(key, value)
Метод setItem в Local Storage використовується для збереження даних у вигляді пари ключ-значення. Як ключ, так і значення повинні бути рядками. Якщо значення не є рядком (наприклад, об'єктом або числом), його потрібно перетворити у формат рядка (зазвичай JSON) перед збереженням.
// localStorage.setItem(key, value)
localStorage.setItem('name', 'Alice')
- getItem(key)
Метод getItem в Local Storage використовується для отримання даних, збережених у браузері за певним ключем. Якщо ключ існує, метод повертає відповідне значення як рядок. Якщо ключ не знайдено, метод повертає null.
// localStorage.getItem(key)
console.log(localStorage.getItem('name'))
- removeItem(key)
Метод removeItem в Local Storage використовується для видалення певної пари ключ-значення з Local Storage. Це корисно, коли дані більше не потрібні або ви хочете очистити непотрібні елементи з пам'яті.
Він не викликає помилку, якщо ключ не існує.
// localStorage.removeItem(key)
localStorage.removeItem('name')
- clear()
Метод clear використовується для видалення всіх пар ключ-значення, збережених в Local Storage. На відміну від removeItem, який видаляє конкретний елемент, clear очищує всі дані, збережені в Local Storage для поточного домену.
// localStorage.clear();
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('isLoggedIn', 'true');
console.log(localStorage.getItem('username')); // Виведе: JohnDoe
console.log(localStorage.getItem('isLoggedIn')); // Виведе: true
// Очищення всіх даних
localStorage.clear();
// Перевірка, чи Local Storage порожній
console.log(localStorage.getItem('username')); // Виведе: null
console.log(localStorage.getItem('isLoggedIn')); // Виведе: null
- key(n)
Метод key(n) використовується для отримання назви ключа за конкретним індексом в Local Storage.
Оскільки Local Storage зберігає пари ключ-значення в упорядкованому списку, цей метод допомагає отримати доступ до ключів за їх позицією.
// localStorage.key(n);
// Зберігаємо кілька пар ключ-значення
localStorage.setItem('username', 'JohnDoe');
localStorage.setItem('theme', 'dark');
localStorage.setItem('isLoggedIn', 'true');
// Отримуємо ключ за індексом 0
console.log(localStorage.key(0)); // Виведе: "username"
// Отримуємо ключ за індексом 1
console.log(localStorage.key(1)); // Виведе: "theme"
// Спробуємо вийти за межі індексів
console.log(localStorage.key(5)); // Виведе: null
Ітерація по всіх ключах
Ви можете використовувати key(n) разом з localStorage.length для ітерації по всіх збережених ключах:
for (let i = 0; i < localStorage.length; i++) {
console.log(localStorage.key(i)); // Виводить кожне ім'я ключа
}
6.
length
Властивість length вказує на кількість пар ключ-значення, які наразі зберігаються в Local Storage для поточного домену.
localStorage.length;
‼️Зберігання об'єктів у localStorage :->
Local Storage підтримує зберігання лише рядків. Щоб зберегти об'єкти, нам потрібно спершу перетворити об'єкт у рядок за допомогою серіалізації JSON (JSON.stringify), перед тим як зберегти його.
При отриманні об'єкта ми можемо перетворити його назад у його початкову форму за допомогою десеріалізації JSON (JSON.parse).
// Створення об'єкта
const user = {
name: 'Alice',
age: 25,
isAdmin: true
};
// Зберігаємо об'єкт в Local Storage
localStorage.setItem('user', JSON.stringify(user));
// Отримуємо об'єкт з Local Storage
const storedUser = JSON.parse(localStorage.getItem('user'));
// Доступ до властивостей об'єкта
console.log(storedUser.name); // Виведе: Alice
console.log(storedUser.age); // Виведе: 25
console.log(storedUser.isAdmin); // Виведе: true
Що таке Session Storage?
Session Storage — це механізм веб-зберігання, який дозволяє зберігати дані на час сесії сторінки. Сесія визначається як час, який користувач проводить на одній вкладці браузера.
На відміну від Local Storage, який зберігає дані між сесіями браузера, дані в Session Storage очищуються, коли завершується сесія сторінки (зазвичай коли вкладка або браузер закривається).
⚆_⚆ Сесія сторінки триває, поки веб-браузер відкритий, і зберігається після оновлення сторінки.
Якщо ви відкриєте кілька вкладок або вікон з тим самим URL, веб-браузер створює окремий sessionStorage для кожної вкладки або вікна.
Тому дані, збережені в одній вкладці веб-браузера, не можуть бути доступні в іншій вкладці.
Коли ви закриваєте вкладку або вікно, веб-браузер завершує сесію і очищує дані в sessionStorage.
Використання Session Storage
Session Storage працює подібно до Local Storage, але головна різниця в тому, що дані зберігаються лише на час сесії сторінки.
Методи Session Storage
sessionStorage.setItem(key, value)– Зберігає дані.sessionStorage.getItem(key)– Отримує дані.sessionStorage.removeItem(key)– Видаляє дані.sessionStorage.clear()– Очищає всі дані.sessionStorage.key(n)– Отримує ключ за конкретним індексом.sessionStorage.length– Отримує загальну кількість збережених елементів.
Рекомендую подивитися:
https://youtu.be/MOd5cTJ6kaA?si=o07djtpPlPbkjgxG
Перекладено з: Local Storage vs Session Storage