Métodos de ventana de JavaScript explicados con ejemplos

Programación

Método de ubicación de ventana

El window.locationobjeto se puede utilizar para obtener información sobre la dirección de la página actual (URL) y para redirigir el navegador a una nueva página.

El window.locationobjeto se puede escribir sin el windowprefijo, como solo location.

Algunos ejemplos:

  • window.location.href devuelve el href (URL) de la página actual
  • window.location.hostname devuelve el nombre de dominio del servidor web
  • window.location.host devuelve tanto el nombre de host como cualquier puerto asociado
  • window.location.pathname devuelve la ruta y el nombre de archivo de la página actual
  • window.location.protocol devuelve el protocolo web utilizado (http: o https :)
  • window.location.assign() carga un nuevo documento

Más información:

MDN

Método de intervalo de ventana

El setInterval()método llama a una función o evalúa una expresión a intervalos específicos (en milisegundos).

setInterval(function(){ alert("Hello"); }, 3000);

El setInterval()método continuará llamando a la función hasta que clearInterval()se llame o se cierre la ventana.

El setInterval()método puede pasar parámetros adicionales a la función, como se muestra en el siguiente ejemplo.

setInterval(function, milliseconds, parameter1, parameter2, parameter3);

El valor de ID devuelto por setInterval()se utiliza como parámetro del clearInterval()método.

Consejos:

  • 1000 ms = 1 segundo.
  • Para ejecutar una función solo una vez, después de un número específico de milisegundos, use el setTimeout()método.

Método de ventana setTimeout

El setTimeout()método establece un temporizador en milisegundos, luego llama a una función o evalúa una expresión cuando el temporizador se agota.

Notas:

  • setTimeout() usa milisegundos y 1000 ms es igual a 1 segundo
  • Este método solo ejecuta la función o expresión que le pasa una vez. Utilice el setInterval()método si necesita repetir la ejecución varias veces
  • Para detener la función o expresión que se le pasa, use el clearTimeout()método

La sintaxis del setTimout()método es la siguiente:

setTimeout(function, milliseconds, param1, param2, ...);

Por ejemplo:

setTimeout(function() { alert("Hello"); }, 3000);

Algo muy importante para recordar setTimeout()es que se ejecuta de forma asincrónica:

console.log("A"); setTimeout(function() { console.log("B"); }, 0); console.log("C"); // The order in the console will be // A // C // B

El orden de los registros de la consola probablemente no sea el esperado. Para resolver este problema y asegurarse de que su código se ejecute sincrónicamente, solo necesita anidar la última console.logdeclaración en la función:

console.log("A"); setTimeout(function() { console.log("B"); console.log("C"); }, 0); // The order in the console will be // A // B // C

Método de tiempo de espera de ventana

El clearTimeout()método se utiliza para detener un temporizador configurado con el setTimeout()método.

 clearTimeout(setTimeout_ID);

Para poder utilizar el clearTimeout()método, debe utilizar una variable global. Vea el ejemplo a continuación

El clearTimeout()método funciona usando la identificación que devuelve setTimeout(). Debido a esto, a menudo es una buena idea usar una variable global para almacenar setTimeout()y luego borrarla cuando sea necesario:

const myTimeout = setTimeout(function, milliseconds); ... // Later, to clear the timeout clearTimeout(myTimeout);

Método de intervalo de limpieza de ventana

El clearInterval()método se utiliza para borrar un temporizador configurado con el setInterval()método.

clearInterval(setInteval_ID);

El clearTimeout()método funciona usando la identificación que devuelve setInterval(). Debido a esto, a menudo es una buena idea usar una variable global para almacenar setInterval()y luego borrarla cuando sea necesario:

const myInterval = setInterval(function, milliseconds); ... // Later, to clear the timeout clearInterval(myInterval);

Método de almacenamiento local de ventana

localStorage proporciona una forma para que sus aplicaciones web almacenen pares clave / valor localmente dentro del navegador del usuario.

Antes de HTML5 y localStorage, los datos de las aplicaciones web tenían que almacenarse en cookies. Cada solicitud HTTP incluye cookies, y estas fueron una vez un método legítimo para almacenar datos de aplicaciones localmente en dispositivos cliente. Sin embargo, muchos de los mismos datos se transmitían con cookies y, dado que estaban limitados a alrededor de 4 KB de datos, era difícil almacenar todo lo que su aplicación necesitaba.

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 in localStorage persists even when the user’s browser is closed and reopened.
  • sessionStorage: This is similar to localStorage, 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("//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.