LocalStorage, збереже все!
...
Для чого потрібен LocalStorage
Напевно у кожного javascript розробника була така ситуація коли необхідно було зберегти якісь данні що вибрав користувач. Наприклад: У вас є зміна мови з української на російську і вам потрібно запам'ятати яку мову вибрав користувач, для того вам ідеально підійде LocalStorage.
План
Перед тим як почати роботу нам необхідно взнати що ми будемо робити. Давайте створемо сайт-клікер який буде рахувати скільки різ користувач нажав на кнопку зберігати це і виводити користувачу на екран.
Створюємо Проект
На сторінці нам потрібна одна кнопка та один параграф, для того в файлі index.html пишемо:
<body>
<p></p>
<button>Нажміть на мене</button>
</body>
Макет готовий! тепер потрібно прописати javascript код, в низу тегу body прописуємо:
<script>
// тут буде javascript код
</script>
Дальше створюємо у середині цього тегу 3 змінні під назвою: output, button і score та присвоюємо їм значення селектора параграфу і кнопки:
let output, button, score;
score = 0;
output = document.querySelector("p");
button = document.querySelector("button");
Після цього нам потрібно вислідити чи користувач нажав на кнопу і якщо так то ми змінній score будемо добавляти по 1:
let output, button, score;
score = 0;
output = document.querySelector("p");
button = document.querySelector("button");
button.onclick = function(){
score++;
output.innerHTML = score;
}
Якщо запустити код то у нас все получиться. Числа виводяться коректно, але якщо перезапустити сторінку то ми побачимо що наші кліки пропали. Тому нам потрібно використати LocalStorage. Створемо змінну під назвою ls_var_name вона буде слугувати назвою комірки у яку ми збережемо данні.
button.onclick = function(){
score++;
let ls_var_name = "user_score";
output.innerHTML = score;
}
Дальше викликаємо Localsotage разом з setItem:
button.onclick = function(){
score++;
let ls_var_name = "user_score";
// Перший параметер це назва комірки другий це її значення
LocalStorage.setItem(ls_var_name, score)
output.innerHTML = score;
}
Після цього нам потрібно вивести данні за допомогою getItem:
button.onclick = function(){
score++;
let ls_var_name = "user_score";
// Перший параметер це назва комірки другий це її значення
LocalStorage.setItem(ls_var_name, score)
output.innerHTML = LocalStorage.getItem(ls_var_name);
}