【Javascript Day20】

location方法

navigator导航对象

history对象

表格数据处理

本地存储的使用

模拟登录状态

location方法

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对象

// 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>

本地存储的使用

// 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>