Método Window location

El objeto window.location puede ser usado para obtener información de la dirección de la página actual (URL) y para redirigir al navegador a una nueva página.

El objeto window.location puede ser escrito sin el prefijo window, como sólo location.

Algunos ejemplos:

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

Más Información:

MDN

Método Window setInterval

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

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

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

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

setInterval(funcion, milisegundos, parametro1, parametro2, parametro3);

El valor de ID retornado por setInterval() es usado como parámetro para el método clearInterval().

Sugerencias:

  • 1000 ms = 1 segundo.
  • Para ejecutar una función sólo una vez, después de un número especificado de milisegundos, usa el método setTimeout().

Método Window setTimeout

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

Notas:

  • setTimeout() usa milisegundos, y 1000 ms es equivalente a 1 segundo.
  • Este método sólo ejecuta la función o expresión que recibe una vez. Usa el método setInterval() si necesitas repetir la ejecución varias veces.
  • Para detener la función o expresión que recibe, usa el método clearTimeout() .

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

setTimeout(funcion, milisegundos, param1, param2, ...);

Por ejemplo:

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

Una cosa importante a recordar sobre setTimeout() es que es ejecutado de manera asíncrona:

console.log("A");
setTimeout(function() { console.log("B"); }, 0);
console.log("C");

// El orden en la consola sera
// A
// C
// B

El orden los resultados en la consola probablemente no es lo que esperabas. Para resolver este problema asegúrate que tu código sea ejecutado de manera síncrona, sólo necesitas anidar el último console.log en la función:

console.log("A");
setTimeout(function() {
    console.log("B");
    console.log("C");
}, 0);

// El orden en la consola sera
// A
// B
// C

Método Window clearTimeout

El método clearTimeout() es usado para detener un temporizador fijado con el método setTimeout().

    clearTimeout(setTimeout_ID);

Para poder usar el método clearTimeout(), primero debes usar una variable global. Ve el ejemplo debajo:

El método clearTimeout() funciona usando el id que fue retornado por setTimeout(). Debido a esto, frecuentemente es una buena idea usar una variable global para guardar setTimeout(), y luego limpiarla cuando sea necesario:

const miTimeout = setTimeout(funcion, milisegundos);

...

// Mas tarde, limpiar el timeout
clearTimeout(miTimeout);

Método Window clearInterval

El método clearInterval() es usado para limpiar un temporizador fijado con el método setInterval().

clearInterval(setInterval_ID);

El método clearTimeout() funciona usando el id retornado por setInterval(). Debido a esto, frecuentemente es una buena idea usar una variable global para guardar setInterval(), y luego limpiarla cuando sea necesario:

const miIntervalo = setInterval(funcion, milisegundos);

...

// Más tarde, limpiar el intervalo
clearInterval(miIntervalo);

Método Window localStorage

localStorage provee una manera para tus aplicaciones web de almacenar pares llave/valor localmente dentro del navegador del usuario.

Antes de HTML5 y localStorage, los datos de la aplicación web tenían que ser almacenados en cookies. Cada solicitud HTTP incluía cookies y estas fueron alguna vez un método legítimo de almacenar datos localmente en los dispositivos de cliente. Sin embargo, muchos de los mismos datos estaban siendo transmitidos con cookies, y ya que estaban limitadas alrededor de 4 KB de datos, era difícil almacenar todo lo que tu aplicación necesitara.

El límite de almacenamiento para localStorage es 10 MB de datos por dominio, y es considerado más eficiente porque la información almacenada ahí no es transferida al servidor con cada solicitud.

Tipos de Almacenamiento Web

localStorage es uno de los dos métodos modernos para los navegadores para almacenar datos localmente:

  • localStorage: Almacena datos sin fecha de expiración. Los datos en localStorage persiste aun cuando el navegador del usuario es cerrado y reabierto.
  • sessionStorage: Es similar a localStorage, excepto que almacena datos sólo por una sesión. Estos datos son removidos una vez que el usuario cierra su navegador.

Métodos localStorage de HTML5

localStorage cuenta con diferentes métodos JavaScript que hacen que sea muy fácil trabajar con ellos.

Para fijar datos:

localStorage.setItem('Nombre', 'algunValor');

Para traer datos del almacenamiento:

localStorage.getItem('Nombre');

Para remover o borrar datos:

localStorage.removeItem('Nombre');

Para limpiar todo en almacenamiento (no sólo un elemento individual):

localStorage.clear();

Para obtener el número de propiedades en almacenamiento:

localStorage.length;

Nota: Todos los métodos mencionados arriba también funcionan con sessionStorage. Simplemente reemplaza localStorage con sessionStorage.

Método Window open

El método de Window open() es usado para abrir una nueva ventana o pestaña del navegador, dependiendo de los parámetros y de la configuración del navegador del usuario. Este método es típicamente usado para ventanas emergentes, y es bloqueado por defecto en muchos navegadores modernos.

La sintaxis del método open() es:

const ventana =  window.open(url, nombreVentana, caracteristicasVentana);

Parámetros

  • url: Una cadena para el recurso que quieres cargar.
  • windowName: Una cadena indicando el nombre objetivo de la nueva ventana o pestaña. Notar que este no será usado como el título de la nueva ventana/pestaña.
  • windowFeatures: Una lista de cadenas opcional y separada por comas de las características tales como el tamaño de la nueva ventana, su posición, si muestra o no la barra de menú, etc.

Ejemplo

let referenciaObjetoVentana;
const strCaracteristicasVentana = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";

function abrirPopupSolicitado() {
  referenciaObjetoVentana = window.open("https://www.freecodecamp.org/", "fCC_WindowName", strCaracteristicasVentana);
}

abrirPopupSolicitado();

El código de arriba intentará abrir una ventana emergente a la página inicial de freeCodeCamp.

Método Window confirm

Puedes usar el método confirm para pedirle a un usuario volver a revisar una decisión en una página web. Cuando llamas a este método, el navegador mostrará una ventana de diálogo con dos opciones del tipo “OK” y “Cancelar”.

Por ejemplo, digamos que alguien hizo clic en el botón Borrar. Podrías correr el siguiente código:

if (window.confirm("¿Estás seguro de que quieres borrar este elemento?")) {
  // Borrar el elemento
}

El mensaje “¿Estás seguro de que quieres borrar este elemente?” aparecerá en la ventana de diálogo. Si el usuario da clic en OK, el método confirm retornará true y el navegador correrá el código dentro de la sentencia if. Si él o ella hace clic en Cancelar, el método retornará false y nada más sucederá. Esto provee alguna protección contra alguien haciendo clic accidentalmente en Borrar.

Traducido del artículo JavaScript Window Methods Explained with Examples