Local Storage in JavaScript with p5.js

Подписаться 1,7 млн

Просмотров 37 тыс.

50% 1

What's the easiest and quickest way to have a p5 sketch re-start from where it last left off? Local Storage!
p5.js Web Editor Sketches:
🕹️ Local Storage: editor.p5js.org/codingtrain/s...
🕹️ Local Storage w/ Canvas: editor.p5js.org/codingtrain/s...
Links discussed in this video:
🔗 Local Storage: developer.mozilla.org/en-US/d...
🔗 storeItem(): p5js.org/reference/#/p5/store...
🔗 getItem(): p5js.org/reference/#/p5/getItem
🔗 Storage for the Web: web.dev/storage-for-the-web/
Other videos mentioned in this video:
🎥 6.1: Introduction to Object-Oriented Programming with ES6 - p5.js Tutorial
• 6.1: Introduction to O...
Timestamps:
0:00 Hello! What is Local Storage?
1:15 Color sliders p5 sketch
2:16 p5 local storage code
7:57 Debug storage with developer tools
8:50 Storing JavaScript objects
10:26 Downsides of local storage
11:15 More examples!
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/Guides/com...
🚩 Suggest Topics: github.com/CodingTrain/Rainbo...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
📚 Books: www.amazon.com/shop/thecoding...
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/websit...

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 70

@kenhaley4 2 года назад

There are two more functions dealing with local storage in p5.js: clearStorage(), which erases everything from local storage for the current domain, and removeItem(key) which removes a specific element from local storage. Handy if you're running out of room in local storage, or simply want to get rid of obsolete clutter.

@TheCodingTrain 2 года назад

Ah thanks for this! Important clarification and addition!

@arpanacharya6008 2 года назад

No way I recently came to know about Local Storage and I thought you might have uploaded a video on it . And it's been 45 minutes since youve uploaded. I'm freaking out.

@younesseelkars8149 2 года назад

that shit happens , enjoy

@crewrangergaming9582 Год назад

I have been a JavaScript developer for a decade now, and have known about localStorage since it wasn't even supported by most of the major browsers, but I am still watching this video, for the fun of it and the way he teaches. Really cool.

@pasemek2501 2 года назад

A while back I created a simple minigame for my coworkers and wanted to persist some data between replays. At the time I didn't know about localstorage and in the end I didn't add such functionality. I might revisit that little project and add it. 2.0 update woop woop!

@chrismorris5241 2 года назад

The only channel on RU-vid where I like every video before it starts. Thank you for everything you have done for us my dear mentor Daniel

@DeniceKnuts 2 года назад

This is exactly what I have trying to figure out for a project. Thanks man!

@shrek7984 2 года назад

Thank’s for saving one of my exams for the second year in a row!

@StevesMakerspace 2 года назад

A really good use for this is storing API keys and then pulling them for use in API sketches. API keys kept in sketches are easily findable and compromised.

@CodingAdventures Год назад

Very nice video. It is of particular interest to people using p5.js without a backend!

@GloriaHoliday 9 месяцев назад

Many thanks for this wonderful video. I would love to see a video on adding local storage to Wordle.

@hussainsalih3520 2 года назад

Keep doing amazing work, big love for you

@runtimejpp 2 года назад

as always , thanks !! we love the content

@DenisovichDev 2 года назад

Thank you for making this video Dan

@mansirrabiu7412 2 года назад

Our Dan our HOPE! YOU'VE BEEN HELPFUL!

@thehappycoder3760 2 года назад

So very useful for storing some data say for a repetitive game score

@WolfieMoonDev 2 года назад

Thank you, this helped a lot

@Jova 2 года назад

I'd like if you did a Delaunay Triangulation tutorial like you had mentioned in the past, at the end of the convex hull algorithm video.

@TheAbsoluteProduction 2 года назад

Thank you so much :D

@devkumar9889 2 года назад

Got to learn something new 🔥

@jasondunken 2 года назад

Side note, in some situations the security settings of a system/browser will prohibit access to the browser's local storage object.

@MrFaaaaaaaaaaaaaaaaa 2 года назад

like when I don't let any rando js run on my sandbox? :)

@dinglerdangler 2 года назад

no waaaay. this video was so good, i watched it twice, then etched it into my skin

@LiteAdventure 2 года назад

You a time traveler?

@Asterism_Desmos 2 года назад

@@LiteAdventure Dang ur catching all of the time travelers today.

@dinglerdangler 2 года назад

@@LiteAdventure the media doesn't want you to know, but here's proof ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-hz7m45hgQHo.html

@RicoGalassi 2 года назад

I feel like this can lead to vulnerabilities, specifically in the case of wordle. If someone created a new fun game using the same local storage val that wordle uses, it can be overidden (in the same browser), correct? Still such an awesome concept and will definitely find use cases for this in future projects!

@patrickcerny5478 2 года назад

localStorage is different for every website! SiteA can't access SiteB localStorage! Hope this clears things up!

@RicoGalassi 2 года назад

@@patrickcerny5478 ahh makes more sense. Thanks!!

@rodakdev 2 года назад

Now I need a video for cookies too.

@lucbloom Год назад

Tip: name keys like this: “project id/value key”…. It’ll save you a headache somewhere down the road.

@x-seronis-x 2 года назад

Does it bother anyone else when people erringly call purple as pink? pink is only red + white (meaning green and blue have to exactly match their magnitudes). red+blue is purple by definition. dont they look distinctly different to everyone? im not bichromatic or tetrachromatic so I dont think I have any color perception outside the norm

@Muphet 2 года назад

i often use localstorage but i tend to use indexeddb instead with fallback to localstorage if browser doesnt support it

@TheCodingTrain 2 года назад

Oh, thanks for the tip!

@babybackend Год назад

Good maximum

@dgloria 2 года назад

I love that wooden flute. Where is Nature of Code? :))) Not that I passed 10th video even... It's just so much to learn.

@TheCodingTrain 2 года назад

I haven't been able to get back to it. . but I want to!!!

@MattRose30000 2 года назад

Since getItem() is a wrapper for localStorage.getItem(), wouldn't it be cool if you could pass a different default value as a second argument? Similar to Python's dict.get(). I feel like directly setting a default value would be needed in most cases anyway.

@isaacbaptista6207 2 года назад

Can you make a video on the file API please?

@yusufmartinez Год назад

11:18 How do I do the drawing? At the end it doesn’t recognize “toDataURL”

@JaveGeddes 2 года назад

I'd love to know how to store,& retrieve my wysiwyg notes from my hard drive.

@depralexcrimson 2 года назад

Wouldn't that be a security issue if just any website is allowed to access your local storage ? Wouldn't that mean that theoretically any website could access passwords/API keys from extensions/websites for example Twitter Facebook, or am I misunderstanding and those sensitive information is saved as a cookie ? Or these cookies don't contain passwords but rather sessionids and whatnot ?

@vicitacious 2 года назад

No, session storage and local storage are domain specific, additionally it is highly unlikely that websites use localfilestorage to store passwords/api keys. One possible implementation would be to store api tokens or identifiers in local storage. This token is obviously only valid for a short period of time

@gower1973 2 года назад

Says in those docs that it can only store strings? Surely that’s wrong you just stored rgb values which I assume are integers?

@TheCodingTrain 2 года назад

Yeah, I mean I think it's probably best for settings but you can store any data you can put into a string!

@ZEDDOESSPORT 2 года назад

I like this

@LiteAdventure 2 года назад

Bold claim considering it’s not been out for 30 seconds

@Asterism_Desmos 2 года назад

@@LiteAdventure lol

@oozarpac 2 года назад

I think you can do (getItem('red') ?? 0) for short your code.

@dave6012 2 года назад

He knows, he’s making it purposely simplistic for the sake of learning this one concept :)

@sandradewinurita 2 года назад

can i ask you to make javascript flag and if enter key to open web content (enter in middle)

@kevnar 2 года назад

Is there a function like this for Processing? I wrote an entire, fully-featured game in Processing and then realized the player can't save their progress between sessions. Oops.

@x-seronis-x 2 года назад

Processing is just java. Use normal file IO for that. localstorage is required in browsers because you dont have such convenient access to filesystem IO

@kevnar 2 года назад

@@x-seronis-x Thanks.

@Troy-ol5fk 2 года назад

Please make another webGL coding challenge

@yo.average.pcb.designer 2 года назад

Why use the online p5.js ide and not vscode

@Rallion1 2 года назад

"not attached to any account anywhere" what about the browser profile? 🤔

@TheCodingTrain 2 года назад

Ah good point!

@Double_T_G 2 года назад

@5:00 Bro we are in JS. Use rSlider.value(r ?? 0);

@janis33 2 года назад

Was thinking the same thing

@crewrangergaming9582 Год назад

this is so weird. I watch these videos on this channel, but mostly animation related ones. But just today I was working on a task that specifically required localStorage.. and I finished that task and came back to my phone and I find this video. I started watching it without even thinking until he said "I dont know how you found this video" it clicked, why! Man.. this is so weird.

@THE16THPHANTOM 2 года назад

so is he like P5.js founder or something? why is he obsessed with this library? what he does kind of transcends P5.js and javascript. i have used his stuff in java and even in c++.

@Linuxdirk 2 года назад

Ahem ... Cookies?

@pastuh 2 года назад

Local Storage will be deleted if you uninstall Chrome extension. Because such storage only exist inside extension

@NilesBlackX 2 года назад

This is incorrect - the Storage object is created on the Document's origin. The context of an extension is not universal to all JS window objects. So if it's used in a web app, it'll be cleared if you clear local storage, if it's in an extension, it'll be cleared upon removing the extension, and if it's in a kiosk, it'll be cleared when the kiosk cache is cleared.

@dgloria 2 года назад

it's coral, not pink. :*