Window location Method
The window.location
object can be used to get information on the current page address (URL) and to redirect the browser to a new page.
The window.location
object can be written without the window
prefix, as just location
.
Some examples:
window.location.href
returns the href (URL) of the current pagewindow.location.hostname
returns the domain name of the web hostwindow.location.host
returns both the host name and any associated portwindow.location.pathname
returns the path and filename of the current pagewindow.location.protocol
returns the web protocol used (http: or https:)window.location.assign()
loads a new document
More Information:
Window setInterval Method
The setInterval()
method calls a function or evaluates an expression at specified intervals (in milliseconds).
setInterval(function(){
alert("Hello");
}, 3000);
The setInterval()
method will continue calling the function until clearInterval()
is called, or the window is closed.
The setInterval()
method can pass additional parameters to the function, as shown in the example below.
setInterval(function, milliseconds, parameter1, parameter2, parameter3);
The ID value returned by setInterval()
is used as the parameter for the clearInterval()
method.
Tips:
- 1000 ms = 1 second.
- To execute a function only once, after a specified number of milliseconds, use the
setTimeout()
method.
Window setTimeout Method
The setTimeout()
method sets a timer in milliseconds, then calls a function or evaluates an expression when the timer runs out.
Notes:
setTimeout()
uses milliseconds, and 1000 ms is equal to 1 second- This method only executes the function or expression you pass to it once. Use the
setInterval()
method if you need to repeat the execution multiple times - To stop the function or expression passed to it, use the
clearTimeout()
method
The syntax of the setTimout()
method is as follows:
setTimeout(function, milliseconds, param1, param2, ...);
For example:
setTimeout(function() {
alert("Hello");
}, 3000);
A very important thing to remember about setTimeout()
is that it's executed asynchronously:
console.log("A");
setTimeout(function() { console.log("B"); }, 0);
console.log("C");
// The order in the console will be
// A
// C
// B
The order of the console logs is probably not what you expected. To solve this problem and make sure that your code is executed synchronously, you just need to nest the last console.log
statement in the function:
console.log("A");
setTimeout(function() {
console.log("B");
console.log("C");
}, 0);
// The order in the console will be
// A
// B
// C
Window clearTimeout Method
The clearTimeout()
method is used stop a timer set with the setTimeout()
method.
clearTimeout(setTimeout_ID);
To be able to use the clearTimeout()
method, you must use a global variable. See the example below
The clearTimeout()
method works by using the id that's returned by setTimeout()
. Because of this, it's often a good idea to use a global variable to store setTimeout()
, then clear that when necessary:
const myTimeout = setTimeout(function, milliseconds);
...
// Later, to clear the timeout
clearTimeout(myTimeout);
Window clearInterval Method
The clearInterval()
method is used to clear a timer set with the setInterval()
method.
clearInterval(setInteval_ID);
The clearTimeout()
method works by using the id that's returned by setInterval()
. Because of this, it's often a good idea to use a global variable to store setInterval()
, then clear that when necessary:
const myInterval = setInterval(function, milliseconds);
...
// Later, to clear the timeout
clearInterval(myInterval);
Window localStorage Method
localStorage
provides a way for your web applications to store key/value pairs locally within the user’s browser.
Before HTML5 and localStorage
, web app data had to be stored in cookies. Every HTTP request includes cookies, and these were once a legitimate method for storing application data locally on client devices. However, a lot of the same data was being transmitted with cookies, and since they were limited to around 4 KB of data, it was difficult to store everything your application needed.
The storage limit for localStorage
is 10 MB of data per domain, and it is considered more efficient because the information stored in it is never transferred to the server with every request.
Types of Web Storage
localStorage
is one of two modern methods for browsers to store data locally:
localStorage
: This stores data with no expiration date. The data inlocalStorage
persists even when the user’s browser is closed and reopened.sessionStorage
: This is similar tolocalStorage
, except that it stores data for one session only. This data is removed once the user closes their browser.
HTML5 localStorage Methods
localStorage
comes with a few different JavaScript methods that makes it very easy to work with.
To set data:
localStorage.setItem('Name', 'somevalue');
To retrieve some data from storage:
localStorage.getItem('Name');
To remove or delete some data:
localStorage.removeItem('Name');
To clear everything in storage (not just an individual item):
localStorage.clear();
To get the number of properties in storage:
localStorage.length;
Note: All of the methods above also work with sessionStorage
. Simply replace localStorage
with sessionStorage
.
Window open Method
The Window open()
method is used to open a new browser window or tab, depending on the parameters and the user's browser settings. This method is typically used for popups, and is blocked by default in a lot of modern browsers.
The syntax of the open()
method is:
const window = window.open(url, windowName, windowFeatures);
Parameters
url
: A string for the resource you want to load.windowName
: A string indicating the target name of the new window or tab. Note that this will not be used as the title for the new window/tab.windowFeatures
: An optional comma-separated list of strings of features such as the size of the new window, its position, whether or not to display the menu bar, and so on.
Example
let windowObjectReference;
const strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";
function openRequestedPopup() {
windowObjectReference = window.open("https://www.freecodecamp.org/", "fCC_WindowName", strWindowFeatures);
}
openRequestedPopup();
The above code will attempt to open a popup to the freeCodeCamp landing page.
Window Confirm Method
You can use the confirm
method to ask a user to double check a decision on a web page. When you call this method, the browser will display a dialog box with two choices along the lines of “OK” and “Cancel.”
For example, say someone has just clicked a Delete button. You could run the following code:
if (window.confirm("Are you sure you want to delete this item?")) {
// Delete the item
}
The message “Are you sure you want to delete this item?” will appear in the dialog box. If the user clicks OK, the confirm method will return true
and the browser will run the code inside the if statement. If he or she clicks Cancel, the method will return false
and nothing else will happen. This provides some protection against someone accidentally clicking Delete.