VueX + LocalStorage to track video watch status

VueX + LocalStorage to track video watch status .Let’s say we get a bunch of videos on our site, and people can’t remember everything they’ve watched… well, good news! Computers are _great_ at remembering things!

We’re going to mark videos as played — either when the video ends or when the user clicks a button — and then display that information to the user on the video watch page and on the lists of videos.

Along the way we’ll learn about VueX, Localstorage, Font Awesome, and vue-video-player.

JWT authentication with VueJS and Vuex
☞ https://morioh.com/p/8e0b9d2ba0f9

A draggable calendar I made when learning VueJS
☞ https://morioh.com/p/03a057ec6214

Create Static Websites Using Nuxt with Vuetify and i18n
☞ https://morioh.com/p/31e402894f6d

0:00 start
1:49 Displaying Played status from localstorage
8:28 Saving Played status to localstorage
12:10 Using FontAwesome
15:15 Detecting the end of video playback
16:38 Showing Played status on video lists
19:25 Ending and review

If you want to know why we used the font-awesome-icon component instead of vuetify’s v-icon component… well, at first it was because I didn’t notice the v-icon component. But then once I did, it was because I prefer the syntax and style of the font-awesome-icon component.

Thanks for watching! Be sure to like/comment/subscribe, and I’ll see you next week as we make our app even more awesome.

Previous video in series: https://youtu.be/sKrBNGw94eQ
Next video in series: https://youtu.be/XygcDWMLYO8
Playlist link: https://www.youtube.com/playlist?list=PLPwpWyfm6JADRf8x1Jc0Da8R71WJyt-Jn

Suggest:

☞ Web Development Tutorial - JavaScript, HTML, CSS

☞ E-Commerce JavaScript Tutorial - Shopping Cart from Scratch

☞ Javascript Project Tutorial: Budget App

☞ Vue js Tutorial Zero to Hero || Brief Overview about Vue.js || Learn VueJS 2023 || JS Framework

☞ JavaScript Programming Tutorial Full Course for Beginners

☞ Learn JavaScript - Become a Zero to Hero