One of the main elements of JavaScript DOM is the global Window Object.
There are many useful methods and objects it provides, but some are just more frequently used than others, which is the reason of me writing this article to introduce you to the features that I found most Useful for me.
So Let's Get Started :
1. setTimeout() :
The first method that I want to talk about is setTimeout().
What this method does is basically call a certain function once after a certain time which you provide.
The method takes two arguments, A callback function and time (in milliseconds) after which you want that function to run.
Imagine if you have to display a success or error modal after submitting a Form after a certain period or if you are just working on a Project Locally and want to imitate a fetch request from an API. Well, the setTimeout() method is the way to go.
In the Example Above we ask if the user wants a custom theme for the website 5 seconds after the page is loaded.
2. setInterval() :
Many times, we want to run a function multiple times after certain intervals. setInterval() is the solution for such use cases.
The syntax of setInterval() is similar to setTimeout() as it also takes the function which you want to run and the interval in which you want the given function to run each time.
But what if you want to stop the function after certain intervals.
Well , there's also a method for just that. The clearInterval() takes the timerId or basically a variable in which the value of setInterval() is stored and stops/clears the function inside setInterval().
In the Above Example, the setInterval method updates our UI each second with an icremental value, thus forming a Timer.
NOTE :There's also a Catch with setInterval(), the function you call inside this can also take up time to execute, hence the interval you passed with the method can take up more time.
For this purpose, if you want to be precise with your delay at regular intervals. I'll Recommend using a nested setTimeout() method instead.
I could try to explain more about the why and how of both setInterval() and a nested setTimeout() in detail, but I think this article here does the job very well.
3. scrollTo()
One of the most Used window method, No website today is complete without a Back to Top button. I mean who doesn't love one such button at the footer of a website which when clicked saves you the hazard to use the Scrollbar to get back to the top of the Page. Also it makes navigating through different sections of your website easy and neat which also increases the User-Experience. With scrollTo(), you can implement this functionality with a single line.
The method takes two arguments, the X and Y (horizontal and vertical) co-ordinates of where you want to scroll to on the page.
the value cannot be negative.
Use this with
html {
scroll-behavior: smooth;
}
in your CSS for enabling smooth scrolling and you are good to go.
The above example shows a button which takes the user to the top of the Page when clicked.
4. Local Storage
This Last one is not a method but an Object with very useful methods.
How many times have you got your UI changes destroyed (removed) after reloading the Page. All your data with your hardwork to make the app work, Gone.
Therefore if you want to persist the changes you made to your website even after you reload the website, you'll need this object methods. Like all Objects LocalStorage stores key value pairs and almost all object methods work on it like any other plain Object.
It mainly uses two methods which are LocalStorage.setItem() and LocalStorage.setItem() to save and retrieve a value from the LocalStorage Object. The Earlier takes key and value as arguments while the later only takes key. The keys and values stored in the LocalStorage object can only be strings. So if you want to store objects within the LocalStorage you can use the JSON.stringify() method like below :
localStorage.user = JSON.stringify({name: "John"});
// sometime later
let user = JSON.parse( localStorage.user );
console.log( user.name ); // John
There's also a LocalStorage.removeItem(key) which removes the item from the storage by it's key.
The best Use Case for using LocalStorage in Authenticating User on the Frontend. You could just save an Authorization Token sent from an API to the LocalStorage and Retrieve it later from the minimum 2MB storage space that all modern browsers provide today.
The Window Object is like a Magic hat which has a lot of other tricks to offer. We'll talk about what other magical things it's hiding in a future Article.
Till then,
Top comments (0)