Тёмный

Уроки Javascript #7. Local Storage - Как правильно использовать? [JS для начинающих] 

Vasilii Muravev
Подписаться 21 тыс.
Просмотров 17 тыс.
50% 1

Мой Telegram: t.me/stackdevru
В этом видео я использую объект Local Storage, который доступен в каждом браузере для хранения любых данных без использования бэкенда.
С помощью объекта хранилища Local Storage, мы будем управлять состоянием следующих элементов на странице:
1) Список ингредиентов нашей пиццы
2) Чек боксы - напротив названия каждого ингредиента
Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.
Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.
Ссылка на исходник: github.com/Vas...
Мои Курсы:
Gatsby JS (полный курс): gatsbyjs.ru
React для начинающих: react001.ru
​Все мои курсы (+ исходные файлы): stackdev.ru
Подписывайся на соц сети:
Telegram: t.me/stackdevru
VK: vasilymur
Instagram: / vm_online
Мой блог о веб-разработке: stackdev.blog

Опубликовано:

 

4 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 35   
@VaeV1ct1s
@VaeV1ct1s Год назад
Начать говорить о локалсторедже, на 20 минуте видео про локалсторедж - гениальный план
@youtubekostroma
@youtubekostroma 3 года назад
Годный контент. «Все как доктор прописал». Спасибо.
@stackdev
@stackdev 3 года назад
Спасибо!
@nefed-L
@nefed-L Год назад
20:27 начало работы с Local Storage
@omarkertis5294
@omarkertis5294 3 года назад
Отдельное спасибо и за исходник хорошего примера.
@avelo895
@avelo895 5 месяцев назад
Благодарю Вас. У Вас очень приятный голос. Вас нравится слушать.
@deterkot
@deterkot Год назад
всм 307 лайков? это определено лайк, грех не поставить лайкос за такую годноту
@stackdev
@stackdev Год назад
Спасибо!
@Norby-Norby
@Norby-Norby Год назад
Спасибо за труд. Пример отличный. Взял исходник, ушел разбираться)))
@stackdev
@stackdev Год назад
Спасибо!
@VenatorLine
@VenatorLine 3 года назад
Огромное спасибо за видеоурок. Только после этого видео дошло как использовать LocalStorage. С меня 38 лайк.
@stackdev
@stackdev 3 года назад
Спасибо!
@sam-y6h4n
@sam-y6h4n 6 месяцев назад
Спасибо!
@ElferCool
@ElferCool Год назад
Вау, круто. Несколько лет уже программирую и не знал про такую штуку. Спасибо огромное за интересный и понятный материал 🙏
@andynaz7044
@andynaz7044 Год назад
Как можно было _не знать?_ Вы что, ничего не читаете? просто сидите и что-то "программируете" ?
@Transguddit
@Transguddit Год назад
Просто шикарно!
@stackdev
@stackdev Год назад
Спасибо!
@АлексейМелентьев-ч3в
gramotno!
@user-bt4dr1dh1f
@user-bt4dr1dh1f 2 года назад
Видео замечательное, все понятно. Одно но: что делать, если необходимо очистить сохраненный в Local Storrage список?
@andynaz7044
@andynaz7044 Год назад
Не быть идиотом-вот что надо вам для счастья
@Нейронафт
@Нейронафт Год назад
Подскажите пожалуйста как достать переписку чатов из локального хранилища Google Chrome?
@velikorossnationalist4259
@velikorossnationalist4259 Год назад
Здравствуйте! Почему в локал сторадж не сохраняет значения после перезагрузки или обновления приложения? 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! ); }
@antonyeskimo7593
@antonyeskimo7593 Год назад
Спасибо за ваш труд. Подскажите, как удалить ингредиент из списка и из localstorage
@antonyeskimo7593
@antonyeskimo7593 Год назад
Создай Свою Пиццу! Загружаю ингредиенты... 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) Подскажите, где ошибка?
@delusio5638
@delusio5638 Год назад
поди браузеры этой штукой засираются... где браузеры хранят localStorage? ccleaner чистит localStorage?
@muzaffaryunusov7032
@muzaffaryunusov7032 3 года назад
как это всё теперь запомнить?..
@Anitizer
@Anitizer 2 года назад
хз
@therelaxingsound6903
@therelaxingsound6903 Год назад
У меня довольно много ошибок вылетало на этом уроке, при идентичном коде. Возможно что-то работает уже не так, как 2 года назад. Я урок до конца досмотрела конечно....
@sviatbondar1721
@sviatbondar1721 2 года назад
if(!e.target.matches('input')) return; console.log(e.target); не понимаю , ведь если код натыкается на return то "Оператор return завершает выполнение текущей функции и возвращает её значение." и"Выражение, значение которого будет возвращено. Если не указано, вместо него возвращается undefined." как тут возвращается input . Магия какая то
@vladbis
@vladbis Год назад
изменение в LS как внести в элементы LS?
@timmyboy1687
@timmyboy1687 Год назад
ne sovsem ponyal zachem nam menyat' znachenie na 'checked' ???
Далее
JavaScript Cookies vs Local Storage vs Session Storage
14:28
Учим JavaScript 32. LocalStorage
15:24
Просмотров 42 тыс.