计算机网站建设与维护衡阳百度seo
目录
location方法
history对象
表格数据处理
本地存储的使用
模拟登录状态
location方法
<p id="num"></p>
<input type="button" value="重载页面" οnclick="reloadPage()">
<input type="button" value="href跳转" οnclick="gotoPage1()">
<input type="button" value="replace跳转" οnclick="gotoPage2()">
<input type="button" value="window.open()跳转" οnclick="gotoPage3()">
<script>
var numDom = document.querySelector("#num");
numDom.innerHTML = Math.random();
console.log( location );
// location.reload() 页面刷新
function reloadPage(){
location.reload();
}
// location.assign("网站") 和href功能一致用于页面跳转
function gotoPage1(){
// location.href = "https://www.baidu.com";
location.assign("https://www.baidu.com")
}
// location.replace("网站"); 页面切换
function gotoPage2(){
location.replace("https://www.baidu.com");
}
function gotoPage3(){
// 在新的页面中打开网站
window.open("https://www.baidu.com");
}
</script>
navigator导航对象
// location 记录访问网站的导航信息 => 自动一部分导航的切换方法
// navigator 提供当前浏览器所运行的系统环境
console.log( navigator );
// navigator.userAgent 返回当前网站运行的电脑环境
console.log( navigator.userAgent );
history对象
<input type="button" value="后退操作" οnclick="backFun()">
<br>
<input type="button" value="后退多个操作" οnclick="backFun2()">
<br>
<input type="button" value="前进操作" οnclick="forwardFun()">
<script>
// history 历史记录对象
console.log(history);
// history.back() // 历史后退,后退一个页面
// history.go(num) // num几个页面 ，num<0
function backFun(){
// history.back();
history.go(-1) // -1 表示后退一个页面 等同于 back()
}
function backFun2(){
history.go(-2); // 后退两个页面
}
// history.forward() // 可以完成前进操作的页面一定是被后退的页面
// history.go(num) // num几个页面 ，num>0
function forwardFun(){
// history.forward(); // 表示前进一个页面
history.go(1); // 1 表示前进一个页面 等同于 forward()
}
</script>
表格数据处理案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table{border-collapse: collapse;}td{border: 1px solid black;padding: 4px 10px;}</style>
</head>
<body><table><caption>学生列表(共<span id="num"></span>人)</caption><thead><tr><td>姓名</td><td>科目</td><td>成绩</td><td>操作</td></tr></thead><tbody id="tbody"><!-- <tr><td></td><td></td><td></td><td><a href="javascript:void(0)">删除</a></td></tr> --></tbody></table><!-- <script src="./js/studentData.js"></script> --><script>// 浏览器提供两种数据持久化的存储操作// localStorage 在浏览器中提供空间大小为 20M 字符串存储空间(不同的网站)// 不同域名之间的存储数据是不共享的// 浏览器操作：打开调试工具-应用-本地存储-对应网站-双击添加// JSON字符串：// 存储的数据类型是String,但字符串的组成格式是JS的数组或者对象格式// 如果包含对象格式数据，对象属性必须是通过 "" 包裹的// 值如果是字符串格式数据，必须使用 ""// localStorage.getItem(属性名) 读取本地存储的对应数据var students = localStorage.getItem("students");console.log(typeof students,students);// JS提供 JSON.parse(json字符串) 将JSON格式字符串转为JS对应的类型数据students = JSON.parse( students );console.log(typeof students,students);function removeStu(i){// 将js数据进行删除 => 页面重新刷新数据依然存在// => 将数据 持久化 保持// => 数据不会因为页面的重新载入，重新访问等操作导致恢复到初始状态// => 将使用者对数据的各项操作进行永久记录students.splice(i,1);// 基于新的数据再次循环页面initTableData();// localStorage.setItem(属性名,属性值-string) 将数据存储到本地空间的对应属性上// localStorage.setItem("students",students)// JSON.stringify(js数据值) 将JS对象或者数组数据转换为 JSON格式字符串// console.log( JSON.stringify(students) );localStorage.setItem("students", JSON.stringify(students) );}function initTableData(){var tbodyDom = document.querySelector("#tbody");var numDom = document.querySelector("#num");numDom.innerHTML = students.length;var temp = "";for (var i = 0; i < students.length; i++) {var stu = students[i];temp += `<tr><td>${stu.name}</td><td>${stu.subject}</td><td>${stu.souce}</td><td><a href="javascript:void(0)" onclick="removeStu(${i})">删除</a></td></tr>`;}tbodyDom.innerHTML = temp;// var aBtns = tbodyDom.querySelectorAll("a");// for (let i = 0; i < aBtns.length; i++) {// aBtns[i].onclick = function(){// // 单独的删除元素，只是页面上的表现上不再显示删除的数据// // 对于JS存储的变量而言，数据依然存在// tbodyDom.removeChild( this.parentNode.parentNode );// students.splice(i,1);// console.log(aBtns,students);// }// }}// 页面加载时的初始化数据initTableData();</script>
</body>
</html>本地存储的使用
<input type="button" value="赋值" οnclick="setLocalValue()">
<input type="button" value="取值" οnclick="getLocalValue()">
<input type="button" value="删除" οnclick="removeLocalValue()">
<input type="button" value="清空" οnclick="clearLocalValue()">
<script>
// localStorage 和 sessionStorage 在使用规则和存储规则上基本保持一致
// 区别1：sessionStorage 存空间理论上限为 5M
// localStorage 存储空间理论上限为 20M
// !!区别2：localStorage 存储得数据不手动删除，是不会丢失
// sessionStorage 对应得会话关闭时，会自动清空所有得数据
// 会话：当前页面得访问状态
// localStorage.setItem(key,value)
// sessionStorage.setItem(key,value)
function setLocalValue(){
localStorage.setItem("name","tom");
sessionStorage.setItem("msg","消息")
}
// localStorage.getItem(key)
// sessionStorage.getItem(key)
function getLocalValue(){
var arg = localStorage.getItem("name");
console.log(arg);
var arg3 = sessionStorage.getItem("msg");
console.log(arg3);
// 如果所取得属性在本地存储中并不存在，返回null
var arg2 = localStorage.getItem("age");
console.log(arg2);
if( arg2===null ){
console.log("age属性不存在值");
}
}
// localStorage.removeItem(key)
// sessionStorage.removeItem(key)
function removeLocalValue(){
localStorage.removeItem("name")
sessionStorage.removeItem("msg")
}
// localStorage.clear()
// sessionStorage.clear()
function clearLocalValue(){
localStorage.clear();
sessionStorage.clear();
}
</script>
模拟登录状态
<input type="button" value="登录" οnclick="doLogin()">
<input type="button" value="退出登录" οnclick="loginOut()">
<h1 id="user"></h1>
<script>
// 假设
// 浏览器存储中如果存在一个 属性名为 token 的值，表示登录，否则表示没有登录
// 页面首次加载时，先判断是否登录
var userDom = document.querySelector("#user");
// var token = localStorage.getItem("token");
var token = sessionStorage.getItem("token");
if(token===null){
userDom.innerHTML = "未登录";
}else{
userDom.innerHTML = "已登录";
}
function doLogin(){
// localStorage.setItem( "token",Math.random() );
sessionStorage.setItem( "token",Math.random() );
}
function loginOut(){
// localStorage.removeItem("token");
sessionStorage.removeItem("token");
}
</script>