Local Storage in JavaScript with p5.js

Channel:
United States The Coding Train
Subscribers:
1,740,000
Published on ● Video Link: https://www.youtube.com/watch?v=_SRS8b4LcZ8


Duration: 12:04
34,828 views
1,098

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: https://editor.p5js.org/codingtrain/sketches/R-Z_q_4c3
🕹️ Local Storage w/ Canvas: https://editor.p5js.org/codingtrain/sketches/cLOmL8Td0

Links discussed in this video:
🔗 Local Storage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage
🔗 storeItem(): https://p5js.org/reference/#/p5/storeItem
🔗 getItem(): https://p5js.org/reference/#/p5/getItem
🔗 Storage for the Web: https://web.dev/storage-for-the-web/

Other videos mentioned in this video:
🎥 6.1: Introduction to Object-Oriented Programming with ES6 - p5.js Tutorial
https://youtu.be/xG2Vbnv0wvg

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: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/Guides/community-contribution-guide.html
🚩 Suggest Topics: https://github.com/CodingTrain/Rainbow-Topics
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://discord.gg/hPuGy2g
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
📚 Books: https://www.amazon.com/shop/thecodingtrain
🖋️ Twitter: https://twitter.com/thecodingtrain
📸 Instagram: https://www.instagram.com/the.coding.train/

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 p5.js Web Editor: https://editor.p5js.org/
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/website/issues/new



Other Videos By The Coding Train


2022-09-12Apple ][ Coding Challenge: Fractal Tree
2022-08-24What was Coding like 40 years ago?
2022-07-16Robot Controllers Part 1: PID (with Dr. Christian Hubicki)
2022-07-14Coding Challenge 171! #shorts
2022-07-14Reviewing the new Coding Train Passenger Showcase!
2022-07-05Coding Challenge 172: Horizontal Directional Drilling
2022-07-03Coding Challenge 171: Wave Function Collapse
2022-05-20All aboard! Revisiting Monty Hall, WFH and trying some Apple Basic!
2022-05-17Preshow! ITP/IMA Spring Show 2022
2022-05-11Coding Challenge 170: The Monty Hall Problem
2022-05-04Local Storage in JavaScript with p5.js
2022-04-15Welcome (again) to the New Studio - Topics TBD
2022-04-08All aboard! Apple Basic, Macrodata Refinement, Passenger Showcase, Upcoming Challenges
2022-04-01The Anal Retentive Coder
2022-03-282.6 Mutual Attraction - The Nature of Code
2022-03-14Coding Challenge 169: Pi in the Sky Game
2022-03-11Coding Challenge 168: MandelBulb 3D Fractal
2022-03-03Beginner's Guide to Machine Learning in JavaScript with ml5.js
2022-02-25More Nature of Code Chapter 2, + 3D Fractals?
2022-02-20Coding Challenge 167: Ulam Spiral of Prime Numbers
2022-02-18Returning to Nature of Code Chapter 2 (N-Body simulations and "mutual" attraction forces).