【Javascript Day20】
目录
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>