IT评测·应用市场-qidao123.com

标题: 【Javascript Day20】 [打印本页]
作者: 去皮卡多    时间: 2025-2-22 04:21
标题: 【Javascript Day20】
目录
location方法
navigator导航对象
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>
表格数据处理案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         table{
  9.             border-collapse: collapse;
  10.         }
  11.         td{
  12.             border: 1px solid black;
  13.             padding: 4px 10px;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <table>
  19.         <caption>学生列表(共<span id="num"></span>人)</caption>
  20.         <thead>
  21.             <tr>
  22.                 <td>姓名</td>
  23.                 <td>科目</td>
  24.                 <td>成绩</td>
  25.                 <td>操作</td>
  26.             </tr>
  27.         </thead>
  28.         <tbody id="tbody">
  29.             <!-- <tr>
  30.                 <td></td>
  31.                 <td></td>
  32.                 <td></td>
  33.                 <td>
  34.                     <a href="javascript:void(0)">删除</a>
  35.                 </td>
  36.             </tr> -->
  37.         </tbody>
  38.     </table>
  39.     <!-- <script src="./js/studentData.js"></script> -->
  40.     <script>
  41.         // 浏览器提供两种数据持久化的存储操作
  42.         // localStorage 在浏览器中提供空间大小为 20M 字符串存储空间(不同的网站)
  43.         //              不同域名之间的存储数据是不共享的
  45.         // 浏览器操作：打开调试工具-应用-本地存储-对应网站-双击添加
  46.         // JSON字符串：
  47.         //      存储的数据类型是String,但字符串的组成格式是JS的数组或者对象格式
  48.         //      如果包含对象格式数据，对象属性必须是通过 "" 包裹的
  49.         //      值如果是字符串格式数据，必须使用 ""
  51.         // localStorage.getItem(属性名) 读取本地存储的对应数据
  52.         var students = localStorage.getItem("students");
  53.         console.log(typeof students,students);
  54.         // JS提供 JSON.parse(json字符串) 将JSON格式字符串转为JS对应的类型数据
  55.         students = JSON.parse( students );
  56.         console.log(typeof students,students);
  58.         function removeStu(i){
  59.             // 将js数据进行删除 => 页面重新刷新数据依然存在
  60.             //                => 将数据 持久化 保持
  61.             //                => 数据不会因为页面的重新载入，重新访问等操作导致恢复到初始状态
  62.             //                => 将使用者对数据的各项操作进行永久记录
  63.             students.splice(i,1);
  64.             // 基于新的数据再次循环页面
  65.             initTableData();
  67.             // localStorage.setItem(属性名,属性值-string) 将数据存储到本地空间的对应属性上
  68.             // localStorage.setItem("students",students)
  70.             // JSON.stringify(js数据值) 将JS对象或者数组数据转换为 JSON格式字符串
  71.             // console.log( JSON.stringify(students) );
  72.             localStorage.setItem("students", JSON.stringify(students) );
  73.             
  74.         }
  76.         function initTableData(){
  77.             var tbodyDom = document.querySelector("#tbody");
  78.             var numDom = document.querySelector("#num");
  80.             numDom.innerHTML = students.length;
  82.             var temp = "";
  83.             for (var i = 0; i < students.length; i++) {
  84.                 var stu = students[i];
  85.                 temp += `
  86.                 <tr>
  87.                     <td>${stu.name}</td>
  88.                     <td>${stu.subject}</td>
  89.                     <td>${stu.souce}</td>
  90.                     <td>
  91.                         <a href="javascript:void(0)" onclick="removeStu(${i})">删除</a>
  92.                     </td>
  93.                 </tr>
  94.                 `;
  95.             }
  96.             tbodyDom.innerHTML = temp;
  98.             // var aBtns = tbodyDom.querySelectorAll("a");
  99.             // for (let i = 0; i < aBtns.length; i++) {
  100.             //     aBtns[i].onclick = function(){
  101.             //         // 单独的删除元素，只是页面上的表现上不再显示删除的数据
  102.             //         // 对于JS存储的变量而言，数据依然存在
  103.             //         tbodyDom.removeChild( this.parentNode.parentNode );
  104.             //         students.splice(i,1);
  105.             //         console.log(aBtns,students);
  106.             //     }
  107.             // }
  108.         }
  110.         // 页面加载时的初始化数据
  111.         initTableData();
  112.     </script>
  113. </body>
  114. </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>

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4