Використання локального сховища в JavaScript для персоналізованих вражень
Добре, готуйтеся, друзі, оскільки ми збираємося підкорити Маунт-Еверест концепцій веб-розробки – локальне сховище! (Ну, можливо, це більше схоже на помірне підйом, але тримайтеся зі мною, я будую напругу!)
Що таке локальне сховище в JavaScript?
Уявіть, у вас є гарний дерев’яний будиночок (ваш сайт), який ваші друзі (користувачі) люблять відвідувати. Але кожного разу, коли вони приходять, їм доводиться знову представлятися, відновлювати свої улюблені зміни в декорації, бо все це просто зникає між візитами. Не зовсім відповідає стандартам будиночка на дереві, чи не так?
Ось де лицар у блискучій броні, локальне сховище в JavaScript, приходить на допомогу! Воно дозволяє нам зберігати дані в браузері користувача, які зберігаються навіть після оновлення сторінки або закриття браузера. Досить цікаво, чи не так?
Занурення в код
Перевірка води
Перш ніж ми перейдемо до створення магії персоналізації з локальним сховищем, давайте трохи перевіримо воду. Для цього ми можемо використати два простих рядки коду.
localStorage.setItem("name", "Новачок в програмуванні");
console.log(localStorage.getItem("name"));
Спробуйте запустити цей код у консолі JavaScript вашого браузера. Подивіться у вашому журналі. Якщо ви бачите, що “Новачок в програмуванні” дивиться на вас, то вітання, ви тільки що підклали руки в локальне сховище!
Практичне застосування: Створення персоналізованого досвіду
Тепер давайте створимо просту функцію персоналізації з локальним сховищем, яка запам’ятовує ім’я користувача і показує індивідуальне привітання під час їх наступних візитів.
// Перевіряємо, чи є яке-небудь ім'я збережене в локальному сховищі
if(localStorage.getItem("name")) {
// Дістаємо збережене ім'я з локального сховища і привітайте користувача
console.log("Ласкаво просимо назад, " + localStorage.getItem("name") + "! Раді бачити вас знову");
} else {
// Якщо немає, попросіть їх ім'я та збережіть його в локальному сховищі для майбутнього використання
var username = prompt("Привіт! Раді з вами познайомитися. Можете сказати нам своє ім'я?");
localStorage.setItem("name", username);
console.log("Ласкаво просимо, " + username + "! Ми раді, що ви тут.");
}
Не соромтеся змінювати цей код та пристосовувати його для вашого веб-сайту за потреби. Але це по суті те, як ви можете використовувати локальне сховище для створення більш персоналізованого досвіду для ваших користувачів!
Очищення локального сховища
Ще одне перед тим, як ми завершимо. Пам’ятайте, що те, що ви зберігаєте в локальному сховищі, залишається там, поки ви не видалите його вручну. Тому важливо озброїтися знаннями про те, як очищати локальне сховище, коли це необхідно. Ось як:
;localStorage.removeItem("name");>
Це видалить ім’я користувача з локального сховища.
;localStorage.clear();>
Тепер це великий калібр. Це видалить все з локального сховища для вашого веб-сайту. Використовуйте його розумно.
Добре, люди, ось де ми завершуємо наше пригода з локальним сховищем. Вітаємо, ви подолали підйом (Пам’ятайте, що з Маунт-Еверестом було для напруги). Насолоджуйтеся підвищенням вашого дерев’яного будиночка (веб-сайту) з більш персоналізованими враженнями за допомогою локального сховища!
Пам’ятайте, у світі JavaScript локальне сховище – ваш надійний друг, завжди тут, щоб допомогти вам запам’ятовувати речі. Так що не забувайте про нього, га?
Щасливого кодування, детективи! Обов’язково повертайтеся до нашої наступної кодової пригоди. Вона буде епічною!
