Давай разберём базовые способы хранения данных в браузере — новички часто путаются в этих технологиях, а работодатели любят задавать вопрос про разницу между ними на интервью 🤓

👉 Запомни важный момент, который касается всех способов: Cookies, Local Storage и Session Storage хранят данные на стороне клиента в формате «ключ-значение» и оба этих параметра могут быть только строками.

👉 Ещё одна интересная деталь: локальное и сессионное хранилище относятся к встроенному в браузер API Web Storage — это просто два варианта его реализации.

Теперь по отдельности о каждом из них:

🔧 Куки хранятся в браузере и устанавливаются сервером через заголовок Set-Cookie. То есть клиент и сервер обмениваются заголовками и данные остаются с обеих сторон — это главное отличие технологии от локального и сессионного хранилища.

Чаще всего куки используются, чтобы хранить данные об авторизации пользователя, иногда они отслеживают действия на сайте.

Срок хранения устанавливается вручную — это может быть одна конкретная сессия, неделя или месяц.

Ёмкость куки для одного домена небольшая — всего 4 КБ. Доступность не зависит от вкладки или окна.

🔧 Локальное хранилище может хранить данные только на стороне клиента, они никогда не попадут на сервер.

Local Storage используют, чтобы хранить результаты в браузерных играх или зафиксировать момент, на котором ты остановился при просмотре видео.

Формально у Local Storage нет срока хранения, но при переполнении современные браузеры сами очищают его.

Ёмкость локального хранилища довольно большая — 5 МБ. Доступность не зависит от вкладки или окна.

🔧 Сессионное хранилище тоже занимает до 5 МБ. Оно работает примерно так же, как и локальное — но только в пределах одной сессии и одной вкладки. То есть если ты закроешь вкладку или перезапустишь браузер, данные не сохранятся. Простой пример — это сохранённые поля в форме в рамках одной сессии пользователя.

На практике разработчики редко ограничиваются этими способами и тебе наверняка придётся освоить дополнительные технологии. Но пока ты учишься, достаточно знать про куки и хранилища и не путаться в них.

С чего начать, если собираешься в веб-программирование?

Давай обсудим 27 июня в 20:00 по МСК, на бесплатном вебинаре SaintCode Bootcamp. Точно стоит зайти, если ты:

🙇‍♀️ Хочешь работать над веб-приложениями, но пока не знаешь с чего начать — смотришь в сторону фронтенда, бэкенда или тестирования.

🙇‍♂️ Не понимаешь, реально ли новичку найти работу в 2023 году и хочешь знать, какие именно технологии во фронтенде помогут устроиться.

🙇‍♀️ Ищешь подходящее место, чтобы научиться кодить и найти единомышленников.

Вебинар проведёт Женя Гриценко, основатель школы и карьерный консультант. В гостях — выпускники 2023 года Игорь Карпов и Артём Егоров. Оба уже вышли на рынок труда: Игорь устроился джуниор-фронтендером в Oaziz DAO, а Артём стажируется на фронтенд-разработчика в Golden Carrot 💪

🫶 Всем зарегистрированным участникам после вебинара подарим дорожную карту для самостоятельного изучения фронтенд-разработки.

Регистрируйся здесь — https://saintcode.ru/webinar_one?utm_source=telegram_nondirect&utm_medium=post&utm_campaign=organic_social&utm_content=webinar2706 ⚡️

Давай вспомним, как работает деструктуризация объектов в JS 🫣

Не так давно мы разбирали задачу с деструктуризацией массивов, а теперь попробуем выполнить похожее действие с объектом. Посмотри на картинку и ответь, что выведется в консоль 🤔

🤗 Объяснение задачи:

Деструктуризация (деструктурирующее присваивание) — это специальный синтаксис присваивания в JavaScript, который помогает сделать сложную структуру проще и определить несколько переменных одной строкой кода.

Наш подопытный объект — это character, зададим ему несколько свойств: firstName, secondName, location и age.

При деструктуризации объекта мы можем использовать все свойства объекта, выбрать некоторые или только одно — в этот раз ограничимся firstName.

Кроме того, при деструктуризации можно задавать значение для свойства по умолчанию или присвоить свойство объекта переменной с другим названием, в нашем случае это forename.

Итог: с помощью деструктуризации значение firstName мы присвоили переменной forename. Поэтому обращаясь в консоли к переменной, мы получаем значение firstName из нашего объекта character — это строка “Ivan”.

Кажется, забыли добавить, что у них не динамично развивающаяся компания 😇

А если серьёзно, то иногда в айтишных вакансиях такого насмотришься — кровь из глаз течёт.

Расскажи, попадалось ли тебе что-то смешное, нелепое или безумное во время поисков работы? 😬

Пока мы готовимся к вебинару 27 июня, решили напомнить, что все записи наших предыдущих встреч лежат на ютубе SaintCode Bootcamp 👌

👀 Вебинар «Как освоить всю информацию по фронтенду и не выгореть?». Запись от 14 января 2023 года, в гостях выпускник буткемпа Макс Гончаров.

Смотреть: https://youtu.be/4-hjiLeLRdQ

👀 Вебинар «Как освоить фронтенд-разработку, если раньше никогда не кодил и не верстал?». Запись от 11 февраля 2023 года, в гостях выпускник буткемпа Кирилл Лазукин.

Смотреть: https://youtu.be/uXNTuweOV6Y

👀 Вебинар «Без коммерческого опыта не берут на работу. Как его получить?». Запись от 11 марта 2023 года, в гостях выпускник буткемпа Влад Александров.

Смотреть: https://youtu.be/RbG1bpIxQuc

👀 Вебинар «Старт в программировании. Что лучше: курсы, самообучение или менторство?». Запись от 1 апреля 2023 года, в гостях Оля Кравченко — фронтенд-разработчица и айти-блогерка.

Смотреть: https://youtu.be/6UUe54D14pM

👀 Вебинар «Как гуманитарию стать программистом?». Запись от 25 апреля 2023 года, в гостях выпускник буткемпа Женя Некипелов.

Смотреть: https://youtu.be/8LWnn1ksaqU

👀 Вебинар «Где учиться кодить, в буткемпе или на вечернем курсе?». Запись от 18 мая 2023 года, в гостях выпускник буткемпа и наставник SaintCode Данил Данилов.

Смотреть: https://youtu.be/tvW7fvD2-0s

Но смотреть видео — это одно, а участвовать в обсуждении и сразу получать ответы на вопросы — совсем другое 😉 Тем более, что все наши вебинары бесплатные и регистрация не займёт у тебя много времени.

Запишись на вебинар «Почему изучение фронтенда — это лучший способ стать веб-программистом?» (27.06 в 20:00 МСК) — https://saintcode.ru/webinar_one?utm_source=telegram_nondirect&utm_medium=post&utm_campaign=organic_social&utm_content=webinar2706 💜

⚡️Да, мы повышаем цены ⚡️

Но они будут расти постепенно. Поторопись, если хочешь пойти в буткемп и потратить меньше 👌

✍️ Ближайший набор совсем скоро — 15 июля. На нём будет только онлайн, без офлайна. При оплате до 5 июля курс обойдётся тебе в 120 тыс. руб. Если оплатишь позже, то 125 тыс. руб.

✍️ Обычный набор с офлайном и онлайном — 15 августа. Цены точно будут выше, чем сейчас на сайте (онлайн подорожает до 165 тыс. руб.), но ты можешь сэкономить, если запишешься заранее.

Узнай подробности и оставь заявку на обучение — https://saintcode.ru/?utm_source=telegram_direct&utm_medium=post&utm_campaign=organic_social&utm_content=priceincrease

До вебинара «Почему новичкам в веб-программировании больше подходит фронтенд?» остаётся меньше двух часов 🔥

Встречу проведёт основатель SaintCode Bootcamp и карьерный консультант Женя Гриценко. В гостях — выпускники буткемпа 2023 года Игорь Карпов и Артём Егоров. Оба уже работают в айти и готовы поделиться своим опытом трудоустройства 👌

Приходи, будет интересно и полезно. Шутки тоже будут — но не обещаем, что смешные 🌚

Регистрируйся — https://saintcode.ru/webinar_one?utm_source=telegram_nondirect&utm_medium=post&utm_campaign=organic_social&utm_content=webinar2706

⚡️Вебинар начнётся через 10 минут ⚡️

На всякий случай держи ссылку, встречаемся в зуме — https://zoom.us/j/91838775959?pwd=RDNheXJnejRvaHNoNTJmWlNza1ByUT09

Как работает инкрементация в JavaScript? ➕➕

Выбирай один из вариантов ответа — что мы увидим в консоли, если запустим этот код на JS.

Объяснение:

Оператор ++ означает инкрементацию, здесь он в постфиксной форме — написан после операнда (str). Что он делает с этой строкой:

1. Переводит строку в число, поскольку это возможно. Будь у нас в переменной str любой текст, на выходе мы бы получали всегда NaN NaN.

2. Сначала возвращает значение переменной, потом меняет его. То есть при первом обращении значение str останется 7, а уже при повторном обращении будет 8.

Поэтому в первой части 7+5=12, во второй 8. Правильный ответ — 12 8.