【JavascriptDay20】
- 手机
- 2025-08-25 18:15:01
目录
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 = " .baidu "; location.assign(" .baidu ") }
// location.replace("网站"); 页面切换 function gotoPage2(){ location.replace(" .baidu "); }
function gotoPage3(){ // 在新的页面中打开网站 window.open(" .baidu "); } </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>
【JavascriptDay20】由讯客互联手机栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“【JavascriptDay20】”
