LocalStorage или как сохранить и использовать данные в браузере пользователя
ฝัง
- เผยแพร่เมื่อ 21 ส.ค. 2020
- Современные браузеры предоставляют аж пять возможностей для хранения данных на стороне клиента. Самыми популярными из них являются coockie и localStorage. "Печеньки" больше любят backend-разработчики, а на "фронте" внушительного уважения удостоился localStorage благодаря удобству использования и гибким возможностям по отслеживанию обновлений в разных вкладках.
_ _
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Заказать консультацию можно здесь pcgramota.com/courses/konsult...
![Уроки Javascript #7. Local Storage - Как правильно использовать? [JS для начинающих]](/img/n.gif)
самое понятное видео с примером(который нужен каждому начинающему). Спасибо!
Спасибо, что продолжаете делать!!
Очень хорошая подача. Узнал пару прикольных фишек для себя, автору спасибо
Крутой контент!!!!
Очень полезное видео! Спасибо! особенно момент с подпиской на событие storage
Это мой второй самый любимый канал, спасибо за каждое видео отдельно!!!
А первый?
@@ridgal IT kamasutra
@@agataageeva424 ааа)
Спасибо за видео, очень доступно, но мне как новичку довольно сложновато все равно, надеюсь со временем и практикой все будет понятно
Всем привет, Михаил, спасибо за видео!) Друзья, подскажите пожалуйста, как я могу отловить событие по localStorage в той же вкладке где и происходят изменения?
Спасибо, очень полезно!
Очень нравится ваша подача и качество, спасибо за урок :)
спасибо за ролик, искал способ сохранять данные для своего сайта, и твой видос помог решить задачу, я очень рад)
михаил подскажите пожалуйста как вытащить инфу из инпутов в локал сторадже с json
может ссылку какую скините или есть что то
Здравствуйте! У меня вопрос такой, а если я через js, добавляю новый блок - допустим div, можно ли такое изменение созраниить после перезагрузки, ведь мы по сути изменили разметку
Вы предлагаете разметку хранить прямо в localStorage? Весьма оригинально :) Не встречал таких кейсов. Обычно если требуется, чтобы с сервера приходила обновленая разметка при последующих перезагрузках, то добавление чего-либо сопровождается с отправкой на сервер, например по rest api. Отправляется отнюдь не разметка, но данные.
Спасибо!
а можно с json и без четбокса просто инпуты
localstorage использую для JWT auth ( Angular + Spring boot ) храню там токен получается + роль какая и почта клиента. но это не безопасно верно ?
можно Ф12 нажать поменять роль ? мне что перед каждым обновлением страницу нужно лучше отправлять на сервер и проверять роль ?
Полагаю, что на сервере всё равно будет валидация. И если отправить роль, которая пользователю не соответствует, то с сервера придет ошибка.
@@mishanep если поменять в locale с User на ADMIN и обновить страницу появится контент который только для админа , но изменять и т.д. не можно так как все выполняет сервер или мне пре каждом обновлении страницы проверять на роль тоже? так только проверяется на vaildtoken и еще если украдут у клиента его токен то могут авторизацию легко сделать верно ?)
С точки зрения безопасности не являюсь большим экспертом. Ей обычно backend как раз занимается и отвечает за то, чтобы лишних скриптов, которые могли бы украсть данные из localStorage, к станице не подключались бы. У бэкенда уже много инструментов, как убедиться, что пользователь один и тот же.
В вашем же случае, если есть опасения, что какой-то умник руками баловаться начнет, то да, самый простой способ - какой вы предложили. Опять же, best practice на сей счет не знаю. Например, делают приватный роутинг, на который изначально попасть нельзя без соответствующих прав (бэкенд просто не пустит), и на таких роутах как раз и отображается что-то исключительно для админов.
Добрый времени суток. У меня немного иная проблема. Скачал клиент-игру (иными словами "лаунчер"), но, нам нем не сохраняются данные кэша и с каждым новым заходом приходится играть с нуля. Мне пришлось создать гостевую учетную запись, покуда кэш лаунчера сохраняется. В чем может быть проблема? (У меня windows 7)
Никаких идей.
Михаил, подскажите, как с помощью localStarage сделать так, чтобы всплывающее окно при закрытии больше не всплывало?
Я делаю так: при клике на "крестик" закрытия popup'a срабатывает функция, добавляющая popup'у opacity:0 и добавляющая в переменную localStorage с ключом и значением. Popup успешно скрывается. Затем в коде идёт проверка if (переменная с localStorage == ключу), то добавить popup'у opacity:0. И вот незадача: localStorage с ключом и значением в браузере сохраняется, но popup появляется при каждой перезагрузке страницы. Не подскажите почему?
А Вы курсы по js не даёте? В ваших видео есть уроки, но они определёнными блоками, не последовательны, рассчитаны на людей уже "в теме", с опытом.
Здравствуйте, Иван!
По-хорошему, всплывающее окно должно быть динамическим. Т.е. при загрузке страницы сначала проверяется соответствующий ключ в localStorage и при его отсутствии создается компонент поп-апа (и добавляется в соответствующую html-позицию). Сейчас, как я понял, у вас в любом случае изначально есть это окно. По идее, оно у вас должно сначала отобразиться, а после отработки скрипта пропасть. Если это не так, то вероятно, скрипт у вас отрабатывает еще до полной отрисовки DOM.
Я преподаю широкую линейку курсов по JavaScript в учебном центре Специалист (там есть очный и вебинарный форматы) - specialist.ru
В планах запись нескольких видео курсов по JS - по самому языку и отдельный курс по React JS (последний пока в приоритете).
Также иногда я самостоятельно набираю людей в поток на вебинарный формат.
@@mishanep "Также иногда я самостоятельно набираю людей в поток на вебинарный формат."
А сколько стоит?
По-разному, зависит от разных факторов.
Сейчас пока нет запланированных ближайших потоков. Думаю появятся после праздников.
Список мероприятий pcgramota.com/%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F/
Материал хороший, доступный. Но голова временами перекрывает часть кода, а часть кода вообще уходит за экран. Учтите это пож-ста на будущее ))). Спасибо
Здравствуйте! Могли бы вы записать видео как создать регистрацию и авторизацию на реакте с помощью licale storage?
Эти вещи делаются в связке с бэкендом. У меня на канале есть видео с примером авторизации через Firebase. Без локал стореджа правда, но в чем сложность его добавить?
@@mishanep по проекту требуют чтобы данные(пароль, логин, почта) сохранялись в local storage)
Стажируюсь, хотелось бы получить первую работу программистом)
@@mishanep если хотите могу если у Вас есть соц.сеть скинуть для интереса проект который мв должны сдать в компании где стажируюсь)
@@mishanep а у Вас на юдеми курс по реакту в категории "Фильмы" на функциональных компанентах обьясняется или классовых?
Можешь помочь разобраться с корзиной? не бесплатно разумеется
а indexedBD пользуетесь?
Нет. Никогда не доводилось.
Ви повинні були знати що весь код який написаний в браузері пропадає після перезагрузки сторінки,.
P.S думав щось навчусь у вас а вы не знаете таких елементарних речей.
Я написал код точь в точь, но ничего не работает( Михаил Непомнящий пожалуйста помогите
Прошел год ,вам никто так и не помог...
Хоть решили эту ошибку либо забросили?
Всем здравствуйте!
Столкнулся с таким моментом. Разбирал код и заметил, как мне кажется, опечатку. В if(formFields[i].type === 'checked'), наверное, вместо checked должен быть написан checkbox. Если оставить все так, как есть, то при отмеченном чекбоксе и обновлении страницы он снимет его, а в localstorage будет отмечено, что должен быть true
Однако если поменять на checkbox, то проблема не решится) Точнее решится, но увидим другую проблему. localStorage.getItem(formFields[i].name) выдает строку, а значит при
formFields[i].checked = localStorage.getItem(formFields[i].name);
он всегда при обновлении страницы будет включать чекбокс, даже если в localstorage у нас стоит false. То есть, видимо, нам нужно перевести ее в булевое значение, а потом уже присваивать это значение к checked. В общем на больную голову быстро написал вот это. С этим работает корректно. Можно красивее и короче, но пусть будет так:
function check(){
if(localStorage.getItem(formFields[i].name) === 'false' || localStorage.getItem(formFields[i].name) === null){
return false;
} else {
return true;
}
}
formFields[i].checked = check();
Если я не прав, то поправьте, пожалуйста)
Ну это очевидная опечатка, такого типа нет, подмечено верно.