A Virtual World - JavaScript Course: Lesson 8 / 11 [Saving the World]

Welcome to the course where we build a self-driving car simulation in a virtual world using HTML, CSS and JavaScript. In this video we'll learn a critical phase of our UI development journey! So far, we've been saving our graph data in local storage and regenerating it when the page loads. But in this way we lose those markings, can't store multiple worlds, and the random appearance of trees might not be something you want.

Moreover, as we move into working with real-world data, you'll realize that drawing such extensive graphs manually isn't practical. That's why it's crucial to explore a more efficient approach: storing information in actual world files that can be loaded when needed! 🌍

Let's learn about data persistence and discover how to save and load your graph efficiently, preserving all your hard work and making your UI development experience smoother.

Have Fun! :-)

⭐PLAYLIST⭐

⭐FINAL APP⭐

💻CODE💻
7. Markings = follow along
8. Saving The World = code after this lesson

⭐ALL PREREQUISITES⭐

⭐Emoji I used in the video⭐
📁

☕Buy me a Coffee?☕

⚡️Join this Channel⚡️

⭐Timestamps⭐
00:00 Introduction
01:09 Saving in Local Storage
04:09 The Problems with the Quick Solution
05:28 The Proper Solution
07:33 Loading the Envelopes
11:16 Loading the Buildings and the Trees
14:14 Loading the Markings
21:30 Saving and Loading from File
28:56 Storing the Zoom / Drag info

[javifontalva]

Terrific vid. I am looking forward to getting around to doing this myself.

[axonile]

As an architect and urban designer, I watch this serie very close !

[top-notch-tech]

Hey Radu, can we add that awesome train with its railway tracks from your other video 😂 it would be cool to see the train moving about in this world. And we need some water features, with some ducks! Thank you for all your work and making the videos avialble to everyone. I can definitely see where we can integrate features from your other courses into this world. You are an excellent instructor.

[Israeljoelic]

This is super decomposition...
This is very helpful to know the power of the browser and JavaScript. Thanks

[prsonprsonsky]

Always happy when I see a new video from you!
Small note: I think the type of the marking can also be stored by just adding "this.type = to the constructor in the marking class.

[TheUnknown]

Great video and series thank you for your time and effort.

There is one question I had about the load function
We read the file, turn it into an object, load that object, then set the localstorage and reload the page

Why can not just read the file into local storage and reload the page, since on reload the world will get generated from local storage?

[firefox_tn]

The best teacher.
Can we add the train 😅?

[TORMENTUMM]

Sweet! My laptop touchpad doesn't works properly for the zooming and it was a little annoying to keep readjusting the zoom every time we reload the project hahaha.

[edutechwithaditya]

reader.onload is asynchronous function so if getting a world object back like me, make a promise, otherwise it will not work.

[christensenper]

Hi Radu. Thank you very much for a good course. I have follow phase 1 and now in this save world (lesson 8) I got problem when adding light.
world.js:231 Uncaught TypeError: Cannot read properties of null (reading 'x')
at #updateLights (world.js:231:41)
at World.draw (world.js:265:23)
at animate ((index):98:15)
Its in #updatelights, but has downloaded all code from github. Why? 🙂

[christian-schubert]

Instead of verifying the existence of a variable's value with the ternary operator you could also just simply use the Nullish coalescing operator or the logical OR operator respectively (depending on use case).

MAN do I feel smart now

[javifontalva]

The colors and the images of the cars are not loading when I save. why??

[axonile]

You want to avoid window.open( ) or it was for the download attribute ? Also that attribute works sometimes without value. It just refers to src