En este artículo, vamos a implementar un código JavaScript que nos permita recargar una página solo una vez.
La implementación más simple:
window.location.reload()
Es el método incorporado más simple en JavaScript que recargará la página, pero la tarea es actualizar la página/recargar la página solo una vez.
Como este método de JavaScript vuelve a cargar la página repetidamente y para solucionar este problema, vamos a utilizar la propiedad Location Hash explicada en el ejemplo.
Ejemplo 1: este ejemplo describe la propiedad Location Hash.
- La propiedad hash establece o devuelve la parte ancla de la URL, incluido el signo de almohadilla/almohadilla (#).
- Cuando utilice esta propiedad, no incluya el signo de libra (#) con la string hash.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script lang="javascript">
const reloadUsingLocationHash = () => {
window.location.hash = "reload";
}
window.onload = reloadUsingLocationHash();
</script>
</body>
</html>
Salida: la URL cambia de http://127.0.0.1:5500/index.html a http://127.0.0.1:5500/index.html#reload
Ejemplo 2: En este ejemplo, vamos a hacer lo mismo pero sin usar la propiedad location.hash y sin cambiar/agregar el signo hash (#) a la URL de la página.
Vamos a utilizar el método DOM location reload() para lograr lo mismo.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<script type='text/javascript'>
// JavaScript anonymous function
(() => {
if (window.localStorage) {
// If there is no item as 'reload'
// in localstorage then create one &
// reload the page
if (!localStorage.getItem('reload')) {
localStorage['reload'] = true;
window.location.reload();
} else {
// If there exists a 'reload' item
// then clear the 'reload' item in
// local storage
localStorage.removeItem('reload');
}
}
})(); // Calling anonymous function here only
</script>
</head>
<body></body>
</html>
Salida: la página se vuelve a cargar sin modificar la URL existente y todo esto es posible gracias al almacenamiento local de la ventana HTML DOM.
Publicación traducida automáticamente
Artículo escrito por jt9999709701 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA