[JavaScript]windows对象(local,navigeter,history)本地存储(localStorage, sessionStorage)

发布于:2023-01-20 ⋅ 阅读:(6) ⋅ 点赞:(0) ⋅ 评论:(0)

目录

Window对象

1.BOM(浏览器对象模型)

2. 定时器-延时函数

4.递归实现setinterval

5.JS执行机制

6.local对象

7.navigeter对象

8.history对象

本地存储

localStorage

sessionStorage


Window对象

1.BOM(浏览器对象模型)

 

  // BOM

        //  BOM(Browser Object Model ) 是浏览器对象模型

        //  window 是浏览器内置中的全局对象,我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的

        // window 对象下包含了 navigator、location、document、history、screen 5个属性,即所谓的 BOM (浏览器对象模 型)

        //document 是实现 DOM 的基础,它其实是依附于 window 的属性。

        // 注:依附于 window 对象的所有属性和方法,使用时可以省略 window

        // 如:window.scroll

        // window.alert()

        // window是最大对象

        var a=19;//使用var声明的变量其实就是相当于给window对象添加属性

2. 定时器-延时函数

        // 定时器-延时函数

        // 🏆  JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout

        //  语法:

        // setTimeout();

        // let id = setTimeout(function () { alert('1秒到了') }, 1000)

        //只执行一次

        // 这个方法有两个参数,

        // 第一个参数是一条或一组js语句,并用引号括住他们,

        // 第二个参数是要等待的时间以毫秒为单位.

        //   setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window,在延时函数中的this是window

        //  🏆清除延时函数:

clearTimeout()

        // 用clearTimeout()方法来停止计时,括号中写指定要停止的定时器的标识符.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>

<body>
    <button>解除定时器</button>
    <img src="../素材/images/ad.png" alt="">
    <script>
        // 定时器-延时函数

        // 🏆  JavaScript 内置的一个用来让代码延迟执行的函数,叫 setTimeout
        //  语法:
        // setTimeout();
        // let id = setTimeout(function () { alert('1秒到了') }, 1000)
        let id = setTimeout(function () {
            // alert('2秒到了')
            // display之前一定要加style
            console.log(this);//window
            document.querySelector('button').disabled = true
            document.querySelector('img').style.display = 'none'
        }, 2000)

        //只执行一次
        // 这个方法有两个参数,
        // 第一个参数是一条或一组js语句,并用引号括住他们,
        // 第二个参数是要等待的时间以毫秒为单位.

        //   setTimeout 仅仅只执行一次,所以可以理解为就是把一段代码延迟执行, 平时省略window
        //  🏆清除延时函数:
        document.querySelector('button').addEventListener('click',
            function () {
                clearTimeout(id)
            })
        // 用clearTimeout()方法来停止计时,括号中写指定要停止的定时器的标识符.
    </script>
</body>

</html>

4.递归实现setinterval

// 递归函数:自己调用自己的函数

  let num = 0
        function fn() {
            console.log('加载中~~~~');
            num++
            if (num > 100) {
                console.log('加载失败');
                return
            }
            fn()
        }
        fn()

      // 用settimeout递归实现setinterval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script>
        // 递归实现setinterval
        let div=document.querySelector('div')
        function fn(){
            // 输出时间
            div.innerHTML=new Date().toLocaleString()
            // 递归
            setTimeout(fn,1000)
        }
        fn()


//          两种定时器对比:
//  setInterval 的特征是重复执行,首次执行会延时
//  setTimeout 的特征是延时执行,只执行 1 次  setTimeout 结合递归函数,能模拟 setInterval 重复执行
//  clearTimeout 清除由 setTimeout 创建的定时任务
    </script>
</body>
</html>

5.JS执行机制

//     🏆    JS 是单线程

// JavaScript 语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互,以及操作 DOM 而诞生的。比

// 如我们对某个 DOM 元素进行添加和删除操作,不能同时进行。 应该先进行添加,之后再删除。

// 单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。这样所导致的问题是: 如果 JS 执行的时间过长,这样就会造成页面的渲染不连贯,导致页面渲染加载阻塞的感觉。

// 🏆同步和异步

// 为了解决这个问题,利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许

// JavaScript 脚本创建多个线程。于是,JS 中出现了同步和异步。

// 同步任务

// 同步任务都在主线程上执行,形成一个执行栈。

// 异步任务

// JS 的异步是通过回调函数实现的。

// 一般而言,

// 异步任务有以下三种类型:

//  1、普通事件,如 click、resize 等 2、资源加载,如 load、error 等 3、定时器,包括 setInterval、setTimeout 等

// 异步任务相关添加到任务队列中(任务队列也称为消息队列)。

// 🏆JS 执行机制

// 1. 先执行执行栈中的同步任务。 2. 异步任务放入任务队列中。

// 3. 一旦执行栈中的所有同步任务执行完毕,系统就会按次序读取任务队列中的异步任务,于是被读取的异步任务

// 结束等待状态,进入执行栈,开始执行。

6.local对象

        //   location对象

        //  location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分

        //  常用属性和方法:

        // href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转 

        //  search 属性获取地址中携带的参数,符号 ?后面部分

        //  hash 属性获取地址中的啥希值,符号 # 后面部分

        //  reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新      

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a href="/#/one">第一个</a>
    <button>刷新</button>
    <a href="http://www.hao123.com" class="load">支付成功,5秒后自动跳转</a>
    <script>
        //   location对象
        //  location 的数据类型是对象,它拆分并保存了 URL 地址的各个组成部分

        //  常用属性和方法:
        // href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转 
        //  search 属性获取地址中携带的参数,符号 ?后面部分
        //  hash 属性获取地址中的啥希值,符号 # 后面部分
        //  reload 方法用来刷新当前页面,传入参数 true 时表示强制刷新       

        console.log(location.href);//得到url地址
        // location.href = 'http://www.hao123.com'//跳转到hao123
        let num = 5

        let id = setInterval(function () {
            num--
            document.querySelector('.load').innerHTML = `支付成功,${num}秒后自动跳转`
            if (num <= 0) {
                clearInterval(id)
                location.href = 'http://www.hao123.com'
            }
        }, 1000)
        // 完整地址:https://www.baidu.com/s?tn=50000021_hao_pg&ie=utf-8&sc=UWd1pgw-pA7EnHc1FMfqnHmvnjDYnH61nHf4rauW5y99U1Dznzu9m1YdnHT3rHT4rj6&ssl_sample=normal&srcqid=6625912385234129344&H123Tmp=nunew7&word=%E6%92%92%E5%A4%A7%E5%A4%A7
        console.log(location.search);
        // search获取的是?之后的tn=50000021_hao_pg&ie=utf-8&sc=UWd1pgw-pA7EnHc1FMfqnHmvnjDYnH61nHf4rauW5y99U1Dznzu9m1YdnHT3rHT4rj6&ssl_sample=normal&srcqid=6625912385234129344&H123Tmp=nunew7&word=%E6%92%92%E5%A4%A7%E5%A4%A7
        console.log(location.hash);
        // 完整:https://music.163.com/#/download
        // hash:#/download

        document.querySelector('button').addEventListener('click', function () {
            location.reload(true)//加true是强制刷新
        })
        // 重新加载reload()

        //强制刷新ctrL+f5 只接更新最新内容

    </script>
</body>

</html>

7.navigeter对象

        // navigator的数据类型是对象,该对象下记录了浏览器自身的相关信息

        console.log(navigator.userAgent);  

 

8.history对象

       // history 的数据类型是对象,该对象与浏览器地址栏的操作相对应,如前进、后退、历史记录等

history.forward()前进

 history.back()后退

history.go(1)//1是前进一个页面 里面放数字正负决定前进与后退,数字决定前进后退几个页面


        document.querySelector('.forward').addEventListener('click', function () {
            history.forward()
        })

        document.querySelector('.back').addEventListener('click', function () {
            history.back()
        })
        document.querySelector('.go').addEventListener('click', function () {
            history.go(1)//1是前进一个页面
        })

本地存储

localStorage

        //  随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在

        // 本地存储大量的数据,HTML5规范提出了相关解决方案。

        //  1、数据存储在用户浏览器中

        // 2、设置、读取方便、甚至页面刷新不丢失数据

        // 3、容量较大,sessionStorage和localStorage约5M 左右

       // 🏆localStorage

        // 1、生命周期永久生效,除非手动删除 否则关闭页面也会存在

        // 2、可以多窗口(页面)共享(同一浏览器可以共享)

        // 3. 以键值对的形式存储使用

 

        // 💎存储数据:

        // localStorage.setItem('键', '值')

      localStorage.setItem('uname', '别无人员')

// 💎 获取数据:

        localStorage.getItem('uname')
        console.log(localStorage.getItem('uname'));

        //💎 删除数据:

        // localStorage.removeItem('uname')

        localStorage.clear()// 删除所有的 localstorage

        //    🎁     存储复杂数据类型存储

        // 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地

        // JSON.stringify(复杂数据类型)  将复杂数据转换成JSON字符串 存储 本地存储中

        // JSON.parse(JSON字符串)  将JSON字符串转换成对象 取出 时候使用

        //JSON属性和值都是双引号进行包含

        // 很多人搞不清楚 JSON和JS对象的关系,其至连谁是谁都不清楚。其实,可以这么理解:JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。

        // JSON.stringify()//一定要将复杂数据(引用数据类型)转换成JSON字符串

        // JSON.parse()// 将JSON字符串转换成对象 取出 时候使用


        //    🎁     存储复杂数据类型存储
        // 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地
        // JSON.stringify(复杂数据类型)  将复杂数据转换成JSON字符串 存储 本地存储中
        // JSON.parse(JSON字符串)  将JSON字符串转换成对象 取出 时候使用
        let obj = [
            {
                name: '彭廷伟',
                age: 23,
                salary: "$40000"
            }
            , {
                name: '刘进强',
                age: 23,
                salary: "$40000"
            }
        ]

        //JSON属性和值都是双引号进行包含

        // 很多人搞不清楚 JSON和JS对象的关系,其至连谁是谁都不清楚。其实,可以这么理解:JSON是JS对象的字符串表示法,它使用文本表示一个JS对象的信息,本质是一个字符串。
        // JSON.stringify()//一定要将复杂数据(引用数据类型)转换成JSON字符串
        obj = JSON.stringify(obj)
        localStorage.setItem('obj', obj)

        // JSON.parse()// 将JSON字符串转换成对象 取出 时候使用
        console.log(
            JSON.parse(localStorage.getItem('obj'))
        );

sessionStorage

//         sessionStorage(了解)

// 1、生命周期为关闭浏览器窗口

// 2、在同一个窗口(页面)下数据可以共享

// 3. 以键值对的形式存储使用

// 4. 用法跟localStorage 基本相同