Aprendizaje front-end web (45) -Objeto de ubicación de BOM de JavaScript, instancia de cookie de BOM

1. Objeto de ubicación de lista de materiales

El objeto Ubicación contiene información sobre la URL actual.

El objeto Ubicación es parte del objeto ventana y se puede acceder a él a través de la propiedad window.Location.

El objeto window.location se utiliza para obtener la dirección (URL) de la página actual y redirigir el navegador a una nueva página. El  objeto window.location se puede escribir sin el prefijo de ventana.

Atributos descripción
picadillo Devuelve la parte de anclaje de una URL.
anfitrión Devuelve el nombre de host y el puerto de una URL.
nombre de host Devuelve el nombre de host de la URL
href Devuelve la URL completa
nombre de ruta El nombre de la ruta de URL devuelto.
Puerto Devuelve el número de puerto utilizado por un servidor URL.
protocolo Devolver un protocolo de URL
buscar Devuelve la parte de consulta de una URL.
método Descripción
asignar() Cargar un documento nuevo
recargar() Recargar el documento actual
reemplazar() Reemplazar el documento actual con un documento nuevo

1.1 Propiedades del objeto de ubicación 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>JS简单学习</title>
	</head>
	
	<body>
		<script type="text/javascript">
			document.write("获取URL的主机名:" + location.hostname + "<br />");
			document.write("获取URL的端口号:" + location.port + "<br />");
			document.write("获取URL的主机名和端口号:" + location.host + "<br />");
			document.write("获取完整的URL:" + location.href + "<br />");
			document.write("获取URL的路径名:" + location.pathname + "<br />");
			document.write("获取URL的一个协议:" + location.protocol + "<br />");
		</script>
	</body>
</html>

1.2 Método del objeto de ubicación

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
		<script type="text/javascript">
			function newDoc() {
				window.location.assign("https://www.tencent.com");
			}
			function reloadDoc() {
				location.reload();
			}
			function replaceDoc() {
				window.location.replace("https://www.baidu.com");
			}
		</script>
	</head>
	
	<body>
		<input type="button" value="载入新文档" onclick="newDoc()" /><br /><br />
		<input type="button" value="重新加载页面" onclick="reloadDoc()" /><br /><br />
		<input type="button" value="载入新文档替换当前页面" onclick="replaceDoc()" />
	</body>
</html>


2.BOM-Cookie

Las cookies son datos almacenados en archivos de texto en su computadora. Las cookies se utilizan para almacenar información del usuario en las páginas web.

Cuando el servidor web envía una página web al navegador, el servidor no registrará la información del usuario después de que se cierre la conexión.

La finalidad de las cookies es resolver "cómo registrar la información del usuario del cliente":

  • Cuando un usuario visita una página web, su nombre puede registrarse en una cookie.
  • La próxima vez que el usuario visite la página, el registro de visitas del usuario se podrá leer en la cookie.

Las cookies se almacenan como pares de nombre / valor, como se muestra a continuación:

username=John Doe

Cuando el navegador solicita una página web al servidor, la cookie que pertenece a la página se agregará a la solicitud. El servidor obtiene la información del usuario de esta manera.

2.1 Varias formas de usar JS para crear cookies

JavaScript puede usar la   propiedad document.cookie para crear, leer y eliminar cookies.

En JavaScript, la creación de una cookie es la siguiente:

document.cookie="username=John Doe";

También puede agregar una hora de vencimiento (en UTC o GMT) a la cookie. De forma predeterminada, las cookies se eliminan cuando se cierra el navegador:

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

También puede utilizar el parámetro de ruta para indicarle al navegador la ruta de la cookie. Por defecto, la cookie pertenece a la página actual.

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

2.2 Utilice JS para leer cookies

En JavaScript, puede utilizar el siguiente código para leer las cookies:

var x = document.cookie;

2.3 Utilice JS para modificar las cookies

En JavaScript, modificar una cookie es similar a crear una cookie, de la siguiente manera:

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

La cookie antigua se sobrescribirá.

2.4 Utilice JS para eliminar las cookies

Eliminar las cookies es muy sencillo. Solo necesita configurar el parámetro expires a la hora anterior, como se muestra a continuación, configurado en Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Tenga en cuenta que no es necesario especificar el valor de la cookie al eliminar.

2.5 pequeño ejemplo 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>JS简单学习</title>
		<script type="text/javascript">
			function setCookie(cname,cvalue,exdays) {
				var d = new Date();
				d.setTime(d.getTime() + (exdays*24*60*60*1000));
				var expires = "expires=" + d.toGMTString();
				document.cookie = cname + "=" + cvalue + "; " + expires;
			}
			function getCookie(cname) {
				var name = cname + "=";
				var ca = document.cookie.split(';');
				for(var i=0;i<ca.length;i++) {
					var c = ca[i].trim();
					if(c.indexOf(name)==0) { 
						return c.substring(name.length,c.length); 
					}
				}
				return "";
			}
			function checkCookie() {
				var user=getCookie("username");
				if(user!="") {
					alert("欢迎 " + user + " 再次访问");
				}else {
					user = prompt("请输入你的名字:","");
			  		if(user!="" && user!=null) {
			    		setCookie("username",user,30);
			    	}
				}
			}
		</script>
	</head>
	
	<body onload="checkCookie()"></body>
</html>

 

Supongo que te gusta

Origin blog.csdn.net/weixin_43823808/article/details/114163999
Recomendado
Clasificación