Уроки Javascript #7. Local Storage - Как правильно использовать? [JS для начинающих]
Vložit
- čas přidán 6. 10. 2020
- Мой Telegram: t.me/stackdevru
В этом видео я использую объект Local Storage, который доступен в каждом браузере для хранения любых данных без использования бэкенда.
С помощью объекта хранилища Local Storage, мы будем управлять состоянием следующих элементов на странице:
1) Список ингредиентов нашей пиццы
2) Чек боксы - напротив названия каждого ингредиента
Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.
Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.
Ссылка на исходник: github.com/VasilyMur/vanilla-...
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog
Благодарю Вас. У Вас очень приятный голос. Вас нравится слушать.
20:27 начало работы с Local Storage
Отдельное спасибо и за исходник хорошего примера.
всм 307 лайков?
это определено лайк, грех не поставить лайкос за такую годноту
Спасибо!
Годный контент. «Все как доктор прописал». Спасибо.
Спасибо!
Начать говорить о локалсторедже, на 20 минуте видео про локалсторедж - гениальный план
Спасибо!
Спасибо за труд. Пример отличный. Взял исходник, ушел разбираться)))
Спасибо!
Огромное спасибо за видеоурок. Только после этого видео дошло как использовать LocalStorage. С меня 38 лайк.
Спасибо!
Просто шикарно!
Спасибо!
gramotno!
Подскажите пожалуйста как достать переписку чатов из локального хранилища Google Chrome?
Здравствуйте! Почему в локал сторадж не сохраняет значения после перезагрузки или обновления приложения?
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [radioValue, setRadioValue] = useState("");
useEffect(() => {
window.localStorage.setItem("language", radioValue);
}, [radioValue]);
useEffect(() => {
setRadioValue(JSON.parse(window.localStorage.getItem("radioValue")));
}, []);
function changeHandler(event) {
setRadioValue(event.target.value);
}
return (
Hello!
);
}
Спасибо за ваш труд. Подскажите, как удалить ингредиент из списка и из localstorage
Создай Свою Пиццу!
Загружаю ингредиенты...
const addItemsForm = document.querySelector('.add-items-form')
const itemsList = document.querySelector('.items-list')
const items = JSON.parse(localStorage.getItem('items')) || []
function addItem(e) {
e.preventDefault()
const text = e.target.item.value
const item = {
text: text,
cheсked: false
}
items.push(item)
localStorage.setItem('items', JSON.stringify(items))
displayItems(items, itemsList)
this.reset()
}
function displayItems(ingridients, ingridientsList) {
ingridientsList.innerHTML = ingridients.map((ingridient, index) => {
return `
${ingridient.text}
Удалить
`
}).join('')
}
function toogleClick(e) {
if (!e.target.matches('input') && !e.target.matches('.remove')) return //в этой строке пишем, что нас не интресует ничего, кроме тегов input и remove.тк до этого выделялся label и input, а нам надо вешать чекбокс тольок на input
if (!e.target.matches('input')) {
const element = e.target.dataset.index //берем индексное значение с помощью dataset
items[element].checked = !items[element].checked //берем массив items и его индексное значение element и берем его значение checked и меняем на противоположное через !
localStorage.setItem('items', JSON.stringify(items))
displayItems(items, itemsList) // тк свойсво items обновилось, а нам надо заново отрендерить(показать) массив items
}
else if (e.target.matches('.remove')) {
const element = e.target.dataset.index;
remove(element);
}
}
function remove(index) {
items.splice(index, 1);
localStorage.setItem('items', JSON.stringify(items));
displayItems(items, itemsList);
}
addItemsForm.addEventListener('submit', addItem)
itemsList.addEventListener('click', toogleClick)
displayItems(items, itemsList)
Подскажите, где ошибка?
Видео замечательное, все понятно. Одно но: что делать, если необходимо очистить сохраненный в Local Storrage список?
Добавить кнопку Очистить и придумать к нему функцию типа LocalStorage.clear() -- не знаю, существует ли такая, надо смотреть доки.
localStorage.removeItem("Ключ") -- Удаляем ключ
localStorage.clear() -- Очищаем все хранилище
Вот посмотрел доки -- угадал!
Не быть идиотом-вот что надо вам для счастья
Вау, круто. Несколько лет уже программирую и не знал про такую штуку. Спасибо огромное за интересный и понятный материал 🙏
Как можно было _не знать?_ Вы что, ничего не читаете? просто сидите и что-то "программируете" ?
поди браузеры этой штукой засираются... где браузеры хранят localStorage? ccleaner чистит localStorage?
Думаю вот о чем. Что надо хранить на сервере, а что в локалсторидже? И как эти данные связать? По какой логике?
Обычно есть база данных, а local storage для каких-то небольших (вспомогательных) технических моментов....
@@stackdev Спасибо! )
как это всё теперь запомнить?..
хз
У меня довольно много ошибок вылетало на этом уроке, при идентичном коде. Возможно что-то работает уже не так, как 2 года назад. Я урок до конца досмотрела конечно....
if(!e.target.matches('input'))
return;
console.log(e.target);
не понимаю , ведь если код натыкается на return то "Оператор return завершает выполнение текущей функции и возвращает её значение." и"Выражение, значение которого будет возвращено. Если не указано, вместо него возвращается undefined." как тут возвращается input . Магия какая то
изменение в LS как внести в элементы LS?
ne sovsem ponyal zachem nam menyat' znachenie na 'checked' ???