LocalStorage или как сохранить и использовать данные в браузере пользователя

  Рет қаралды 21,886

Михаил Непомнящий

Михаил Непомнящий

3 жыл бұрын

Современные браузеры предоставляют аж пять возможностей для хранения данных на стороне клиента. Самыми популярными из них являются coockie и localStorage. "Печеньки" больше любят backend-разработчики, а на "фронте" внушительного уважения удостоился localStorage благодаря удобству использования и гибким возможностям по отслеживанию обновлений в разных вкладках.
_ _
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Заказать консультацию можно здесь pcgramota.com/courses/konsult...

Пікірлер: 49
@user-mw1xy7xx7e
@user-mw1xy7xx7e 2 жыл бұрын
самое понятное видео с примером(который нужен каждому начинающему). Спасибо!
@forest_1771
@forest_1771 3 жыл бұрын
Спасибо, что продолжаете делать!!
@user-rz1bn3gl7q
@user-rz1bn3gl7q 3 жыл бұрын
Очень хорошая подача. Узнал пару прикольных фишек для себя, автору спасибо
@user-vm2db5cq1g
@user-vm2db5cq1g Жыл бұрын
Очень полезное видео! Спасибо! особенно момент с подпиской на событие storage
@takashimurakami3560
@takashimurakami3560 Жыл бұрын
спасибо за ролик, искал способ сохранять данные для своего сайта, и твой видос помог решить задачу, я очень рад)
@brr3534
@brr3534 2 жыл бұрын
Очень нравится ваша подача и качество, спасибо за урок :)
@agataageeva424
@agataageeva424 3 жыл бұрын
Это мой второй самый любимый канал, спасибо за каждое видео отдельно!!!
@ridgal
@ridgal Жыл бұрын
А первый?
@agataageeva424
@agataageeva424 Жыл бұрын
@@ridgal IT kamasutra
@ridgal
@ridgal Жыл бұрын
@@agataageeva424 ааа)
@sviatbondar1721
@sviatbondar1721 Жыл бұрын
Спасибо за видео, очень доступно, но мне как новичку довольно сложновато все равно, надеюсь со временем и практикой все будет понятно
@alexmlnkv
@alexmlnkv 3 жыл бұрын
Спасибо, очень полезно!
@GeorgiiGalechyan
@GeorgiiGalechyan Жыл бұрын
Крутой контент!!!!
@mykolaromanchenko6904
@mykolaromanchenko6904 2 жыл бұрын
Всем привет, Михаил, спасибо за видео!) Друзья, подскажите пожалуйста, как я могу отловить событие по localStorage в той же вкладке где и происходят изменения?
@squarl5922
@squarl5922 3 жыл бұрын
Спасибо!
@user-es1in9oy1o
@user-es1in9oy1o Жыл бұрын
михаил подскажите пожалуйста как вытащить инфу из инпутов в локал сторадже с json может ссылку какую скините или есть что то
@user-eh2wl6wc4b
@user-eh2wl6wc4b 3 жыл бұрын
Здравствуйте! У меня вопрос такой, а если я через js, добавляю новый блок - допустим div, можно ли такое изменение созраниить после перезагрузки, ведь мы по сути изменили разметку
@mishanep
@mishanep 3 жыл бұрын
Вы предлагаете разметку хранить прямо в localStorage? Весьма оригинально :) Не встречал таких кейсов. Обычно если требуется, чтобы с сервера приходила обновленая разметка при последующих перезагрузках, то добавление чего-либо сопровождается с отправкой на сервер, например по rest api. Отправляется отнюдь не разметка, но данные.
@user-es1in9oy1o
@user-es1in9oy1o Жыл бұрын
а можно с json и без четбокса просто инпуты
@user-ma12ri25o9
@user-ma12ri25o9 2 жыл бұрын
Добрый времени суток. У меня немного иная проблема. Скачал клиент-игру (иными словами "лаунчер"), но, нам нем не сохраняются данные кэша и с каждым новым заходом приходится играть с нуля. Мне пришлось создать гостевую учетную запись, покуда кэш лаунчера сохраняется. В чем может быть проблема? (У меня windows 7)
@mishanep
@mishanep 2 жыл бұрын
Никаких идей.
@user-pi8gy9fj7v
@user-pi8gy9fj7v Жыл бұрын
Материал хороший, доступный. Но голова временами перекрывает часть кода, а часть кода вообще уходит за экран. Учтите это пож-ста на будущее ))). Спасибо
@iDobroslavin
@iDobroslavin 3 жыл бұрын
Михаил, подскажите, как с помощью localStarage сделать так, чтобы всплывающее окно при закрытии больше не всплывало? Я делаю так: при клике на "крестик" закрытия popup'a срабатывает функция, добавляющая popup'у opacity:0 и добавляющая в переменную localStorage с ключом и значением. Popup успешно скрывается. Затем в коде идёт проверка if (переменная с localStorage == ключу), то добавить popup'у opacity:0. И вот незадача: localStorage с ключом и значением в браузере сохраняется, но popup появляется при каждой перезагрузке страницы. Не подскажите почему? А Вы курсы по js не даёте? В ваших видео есть уроки, но они определёнными блоками, не последовательны, рассчитаны на людей уже "в теме", с опытом.
@mishanep
@mishanep 3 жыл бұрын
Здравствуйте, Иван! По-хорошему, всплывающее окно должно быть динамическим. Т.е. при загрузке страницы сначала проверяется соответствующий ключ в localStorage и при его отсутствии создается компонент поп-апа (и добавляется в соответствующую html-позицию). Сейчас, как я понял, у вас в любом случае изначально есть это окно. По идее, оно у вас должно сначала отобразиться, а после отработки скрипта пропасть. Если это не так, то вероятно, скрипт у вас отрабатывает еще до полной отрисовки DOM. Я преподаю широкую линейку курсов по JavaScript в учебном центре Специалист (там есть очный и вебинарный форматы) - specialist.ru В планах запись нескольких видео курсов по JS - по самому языку и отдельный курс по React JS (последний пока в приоритете). Также иногда я самостоятельно набираю людей в поток на вебинарный формат.
@iDobroslavin
@iDobroslavin 3 жыл бұрын
@@mishanep "Также иногда я самостоятельно набираю людей в поток на вебинарный формат." А сколько стоит?
@mishanep
@mishanep 3 жыл бұрын
По-разному, зависит от разных факторов. Сейчас пока нет запланированных ближайших потоков. Думаю появятся после праздников. Список мероприятий pcgramota.com/%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F/
@day_tradingnew
@day_tradingnew 7 ай бұрын
Можешь помочь разобраться с корзиной? не бесплатно разумеется
@VAGAN0
@VAGAN0 3 жыл бұрын
localstorage использую для JWT auth ( Angular + Spring boot ) храню там токен получается + роль какая и почта клиента. но это не безопасно верно ? можно Ф12 нажать поменять роль ? мне что перед каждым обновлением страницу нужно лучше отправлять на сервер и проверять роль ?
@mishanep
@mishanep 3 жыл бұрын
Полагаю, что на сервере всё равно будет валидация. И если отправить роль, которая пользователю не соответствует, то с сервера придет ошибка.
@VAGAN0
@VAGAN0 3 жыл бұрын
@@mishanep если поменять в locale с User на ADMIN и обновить страницу появится контент который только для админа , но изменять и т.д. не можно так как все выполняет сервер или мне пре каждом обновлении страницы проверять на роль тоже? так только проверяется на vaildtoken и еще если украдут у клиента его токен то могут авторизацию легко сделать верно ?)
@mishanep
@mishanep 3 жыл бұрын
С точки зрения безопасности не являюсь большим экспертом. Ей обычно backend как раз занимается и отвечает за то, чтобы лишних скриптов, которые могли бы украсть данные из localStorage, к станице не подключались бы. У бэкенда уже много инструментов, как убедиться, что пользователь один и тот же. В вашем же случае, если есть опасения, что какой-то умник руками баловаться начнет, то да, самый простой способ - какой вы предложили. Опять же, best practice на сей счет не знаю. Например, делают приватный роутинг, на который изначально попасть нельзя без соответствующих прав (бэкенд просто не пустит), и на таких роутах как раз и отображается что-то исключительно для админов.
@user-ml4ul2xk9l
@user-ml4ul2xk9l 8 күн бұрын
а indexedBD пользуетесь?
@mishanep
@mishanep 8 күн бұрын
Нет. Никогда не доводилось.
@user-tx1zx5hx6j
@user-tx1zx5hx6j 4 ай бұрын
Ви повинні були знати що весь код який написаний в браузері пропадає після перезагрузки сторінки,. P.S думав щось навчусь у вас а вы не знаете таких елементарних речей.
@velikorossnationalist4259
@velikorossnationalist4259 Жыл бұрын
Здравствуйте! Могли бы вы записать видео как создать регистрацию и авторизацию на реакте с помощью licale storage?
@mishanep
@mishanep Жыл бұрын
Эти вещи делаются в связке с бэкендом. У меня на канале есть видео с примером авторизации через Firebase. Без локал стореджа правда, но в чем сложность его добавить?
@velikorossnationalist4259
@velikorossnationalist4259 Жыл бұрын
@@mishanep по проекту требуют чтобы данные(пароль, логин, почта) сохранялись в local storage)
@velikorossnationalist4259
@velikorossnationalist4259 Жыл бұрын
Стажируюсь, хотелось бы получить первую работу программистом)
@velikorossnationalist4259
@velikorossnationalist4259 Жыл бұрын
@@mishanep если хотите могу если у Вас есть соц.сеть скинуть для интереса проект который мв должны сдать в компании где стажируюсь)
@velikorossnationalist4259
@velikorossnationalist4259 Жыл бұрын
@@mishanep а у Вас на юдеми курс по реакту в категории "Фильмы" на функциональных компанентах обьясняется или классовых?
@bydzzzenik1394
@bydzzzenik1394 Жыл бұрын
Я написал код точь в точь, но ничего не работает( Михаил Непомнящий пожалуйста помогите
@Snigers
@Snigers 26 күн бұрын
Прошел год ,вам никто так и не помог... Хоть решили эту ошибку либо забросили?
@n0fce82
@n0fce82 Жыл бұрын
Всем здравствуйте! Столкнулся с таким моментом. Разбирал код и заметил, как мне кажется, опечатку. В 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(); Если я не прав, то поправьте, пожалуйста)
@user-zb4qi7rx9j
@user-zb4qi7rx9j 9 ай бұрын
Ну это очевидная опечатка, такого типа нет, подмечено верно.
Синхронизация Redux и localStorage с redux-persist
14:05
Михаил Непомнящий
Рет қаралды 35 М.
When someone reclines their seat ✈️
00:21
Adam W
Рет қаралды 20 МЛН
$10,000 Every Day You Survive In The Wilderness
26:44
MrBeast
Рет қаралды 102 МЛН
ПАРАЗИТОВ МНОГО, НО ОН ОДИН!❤❤❤
01:00
Chapitosiki
Рет қаралды 2,8 МЛН
Знакомство с REST API и форматом JSON
27:48
Михаил Непомнящий
Рет қаралды 62 М.
Запросы к серверу с библиотекой Axios
27:38
Михаил Непомнящий
Рет қаралды 54 М.
Что такое промисы в JavaScript. Фундаментальный JavaScript
24:51
Михаил Непомнящий
Рет қаралды 41 М.
Урок 17. JavaScript. Все о LocalStorage
16:39
Владилен Минин
Рет қаралды 148 М.
Аутентификация. Сессии и JWT
23:37
Сеньор Full Stack
Рет қаралды 6 М.
Local Storage Explained In 10 min | Javascript
10:53
ProMaker Dev
Рет қаралды 53 М.
JavaScript 2.0. Local Storage. Сохраним все!
14:38
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 59 М.
RTK Query или альтернативный Redux по работе с API
31:55
Михаил Непомнящий
Рет қаралды 93 М.
When someone reclines their seat ✈️
00:21
Adam W
Рет қаралды 20 МЛН