Browser data storage: localStorage, sessionStorage, cookies, IndexedDB. Changing the website theme
✏️ We'll explore browser data storage: cookies, localStorage, and sessionStorage. We'll learn how to manage cookies in the browser, and how to read, add, update, and delete records from storage. Using the mechanics of saving data in localStorage, we'll implement a class-based theme switching component, ThemeSwitcher.
🔴 Timeline:
▶ 00:00 | Introduction
▶ 00:24 | Cookies in the browser — document.cookie
▶ 02:33 | Cookies in the browser — adding a new record, updating an existing one
▶ 03:34 | Cookies in the browser — adding/updating a record with special characters using the encodeURIComponent function
▶ 04:40 | Cookies in the browser — reading records, the decodeURIComponent function
▶ 06:50 | Browser Cookies - Deleting Records
▶ 09:26 | Browser Cookies - Limitations
▶ 10:36 | SessionStorage and LocalStorage Browser Storage
▶ 11:49 | Methods for Managing Data in SessionStorage and LocalStorage
▶ 14:33 | Changing the Website Theme - ThemeSwitcher Class Component
▶ 22:46 | IndexedDB Storage
▶ 24:01 | Conclusion
📚 Video links:
➖ Lesson code: https://github.com/aleksanderlamkov/j...
➖ "Storing Data in the Browser" article on Doka Guide: https://doka.guide/tools/browsers-sto...
➖ IndexedDB guide: https://web.dev/articles/indexeddb
➖ JavaScript documentation from MDN: https://developer.mozilla.org/ru/docs...
➖ Russian-language Doka JavaScript reference: https://doka.guide/js/
➖ Fundamental online JavaScript tutorial: https://learn.javascript.ru/
💬 Community chat on Telegram (help for beginners):
https://t.me/FriendlyFrontend
🧑💻 Main Telegram channel:
https://t.me/AleksanderLamkov
❤️ Boosty (support the author):
https://boosty.to/friendly-frontend
🗂️ Free courses on the channel:
🟠 HTML: • HTML курс 2025
🔵 CSS: • CSS курс 2025
🟡 JS: • JavaScript курс 2025
🟢 A11y: • Accessibility курс 2025
🗺 Frontend Roadmap: • Frontend Roadmap 2024 | Что должен учить ф...
⚪️ Layout Masterclass for Beginners: • Адаптивная верстка сайта с нуля для начина...
🔘 Layout Masterclass for Advanced (BEM, SCSS): • Вёрстка сайта с 0 до результата | HTML, БЭ...
⚫️ Layout Masterclass with JavaScript Practice: • Вёрстка сайта с нуля • HTML, SCSS, JS прак...
🔴 Layout Masterclass on JSX, SCSS, JS, Vite, Minista (SSG), BEM: https://stepik.org/a/228315
📌 Author:
➖ Personal website: https://aleksanderlamkov.ru/
➖ Telegram: https://t.me/AleksanderLamkov
➖ Boosty: https://boosty.to/friendly-frontend
➖ GetMentor: https://getmentor.dev/mentor/aleksand...
➖ Stepik (paid courses and workshops): https://stepik.org/a/228315
#frontend #frontend #js #javascript