1. BOM-Location object
The Location object contains information about the current URL.
The Location object is a part of the window object and can be accessed through the window.Location property.
The window.location object is used to obtain the address (URL) of the current page and redirect the browser to a new page. The window.location object can be written without the window prefix.
| Attributes | description |
|---|---|
| hash | Returns the anchor part of a URL |
| host | Returns the hostname and port of a URL |
| hostname | Return the hostname of the URL |
| href | Return the full URL |
| pathname | The URL path name returned. |
| port | Returns the port number used by a URL server |
| protocol | Return a URL protocol |
| search | Returns the query part of a URL |
| method | Description |
|---|---|
| assign() | Load a new document |
| reload() | Reload the current document |
| replace() | Replace the current document with a new document |
1.1 Location object properties
<!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 Location object method
<!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
Cookies are data, stored in text files on your computer. Cookies are used to store user information on web pages.
When the web server sends a web page to the browser, the server will not record the user's information after the connection is closed.
The purpose of cookies is to solve "how to record client user information":
- When a user visits a web page, his name can be recorded in a cookie.
- The next time the user visits the page, the user's visit record can be read in the cookie.
Cookies are stored as name/value pairs, as shown below:
username=John DoeWhen the browser requests a web page from the server, the cookie belonging to the page will be added to the request. The server obtains user information in this way.
2.1 Several ways to use JS to create cookies
JavaScript can use the document.cookie property to create, read, and delete cookies.
In JavaScript, creating a cookie is as follows:
document.cookie="username=John Doe";You can also add an expiration time (in UTC or GMT) to the cookie. By default, cookies are deleted when the browser is closed:
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";You can also use the path parameter to tell the browser the path of the cookie. By default, the cookie belongs to the current page.
document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";
2.2 Use JS to read cookies
In JavaScript, you can use the following code to read cookies:
var x = document.cookie;
2.3 Use JS to modify cookies
In JavaScript, modifying a cookie is similar to creating a cookie, as follows:
document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";The old cookie will be overwritten.
2.4 Use JS to delete cookies
Deleting cookies is very simple. You only need to set the expires parameter to the previous time, as shown below, set to Thu, 01 Jan 1970 00:00:00 GMT:
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";Note that it is not necessary to specify the value of the cookie when deleting.
2.5 small example
<!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>
