SvelteKit Stores Using Local Storage With Skeleton UI (Persistent Store)

🎓 Join my learning platform for module based courses, learning exercises, and more: coderprep.com/
In this video we go over how to use Local Storage alongside SvelteKit stores (Such as a writable) in order to create persistent states in our SvelteKit applications. We also use TypeScript to ensure that certain values inside of our SvelteKit store is typed to a certain interface we create during the tutorial. We also cover a bunch of topics such as handling text inputs, array manipulation, and creating / deleting data within our SvelteKit writable.
Final project code: github.com/coopercodes/Svelte...
0:00 Introduction / project showcase
1:26 Setting up Skeleton UI
3:00 Creating user interface
5:35 Initializing our writable with Local Storage
8:41 Creating addContact function
12:00 Rendering list contacts from Local Storage
13:22 Creating deleteContact function
16:31 Final project / thanks for watching!

[@rekaiadraoui4060]

I've done all of your svelte/kit tuts so far and im loving it thanks a lot

[@Salah-lv3oj]

Amazing video Cooper you are by far My Fav Teacher on the web

[@ThePrincesInTheTower]

Really enjoying the svelte/kit tutorials Cooper (having done all of them so far), must be tough as a creator having to choose between the plethora of frameworks and tools available for development (in terms of deciding what tutorial to do next). My personal situation allows me to have complete freedom of platform and after having tried a few, svelte/kit are in my mind the 'easiest' so that is where i have landed. There are comparably low amounts of svelte/kit content so your efforts are much appreciated and i am looking forward to the next one!

[@nickstaresinic9933]

Another nice & concise tutorial, Cooper, smoothly delivered. And very useful for me, too: After considerable work implementing localstorage in earlier apps, it looks like skeleton has made adding that essential feature painless.

[@CooperCodes]

Yup they make it super easy to work with local storage, and it works great with TypeScript which is a huge bonus. Thanks for watching Nick!

[@RobertBolgar]

Your videos are awesome! Thank you for explaining everything in the code too

[@CooperCodes]

Thanks so much Robert! You are very welcome and thank you for watching / appreciating the explanation :)

[@paulthomas1052]

Hi, another interesting and informative video - thanks so much !

[@0xpako]

I just discovered this channel and going through the videos, you added a new one! Exactly the one I was looking for :D
Coincidence for sure, but I'll take that! And you'll take my sub for these vids

[@CooperCodes]

What a coincidence, hopefully this video helped you out! Thanks for commenting here :)

[@0xpako]

@@CooperCodes Already building man, thanks again!

[@needlesandpins1701]

Can you still use Skeleton UI in svelte. Or I need to use it directly with Svelekit?

[@TerrisLinenbach]

Did you cover what happens when someone logs out or otherwise protecting private data?

[@deucebigs9860]

Is there a reason you don't use html form markup for your input forms?

[@CooperCodes]

Good question, its mainly because the forms in Skeleton UI (The UI library I'm using) have some predefined styling when you structure the forms like the way I did in the video. Check out more with the forms here: www.skeleton.dev/elements/forms . I have seen the tag used generally when you want a GET or POST request to be fired on submit (Example: developer.mozilla.org/en-US/docs/Web/HTML/Element/form#examples ), and since we aren't communicating with any APIs here I opted not to use them for that reason as well. Hopefully this helps answer your question, and thank you for the comment / watching :)