Web APIs

前端-公瑾

已于 2022-06-05 20:34:10 修改

阅读量244

点赞数 1

文章标签： javascript

于 2022-04-16 19:06:47 首次发布

本文链接：https://blog.csdn.net/qq_49029709/article/details/124217995

版权

文章目录

一、Window对象
二、定时器
二、存储对象
- - 1.localStorage作用 : 本地存储
  - 2.sessionStorage作用 : 临时存储
总结

一、Window对象

1. window对象 : 浏览器窗口

window对象三个特点

  	 (1)window是js中的顶级对象。 所有的全局函数、全局变量都是window对象的成员(属性+成员)
     (2)只要是window对象中的成员，使用时都可以省略window
     (3)window对象中有一个属性叫做top, 不可以作为变量名

window对象
- 打开窗口 : window.open()
- 关闭窗口 : window.close()

window对象两个事件

    (1)window.onload : DOM树 + 外部资源路径 加载完毕后执行
    (2)window.onbeforeunload : 页面关闭之前执行

		//(1)window.onload : DOM树 + 外部资源路径 加载完毕后执行
        window.addEventListener('load', function () {
            let box = document.querySelector('.box')
            console.log(box)
            console.log(box.scrollWidth, box.scrollHeight)
        })

        //(2)window.onbeforeunload : 页面关闭之前执行
        window.addEventListener('beforeunload',function(){
            console.log('页面关闭之前')
            //可以存储一些数据
        })

2. location : 网页地址栏

location三个方法：

    1. location.assign('url') : 跳转网页
        等价写法:   location.href = 'url'
    2. location.replace('url') : 替换网页 (无法返回)
    3. location.reload() : 刷新网页 (一般用于移动端)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button class="assign">assign跳转网页</button>
    <button class="replace">replace替换网页</button>
    <button class="reload">reload刷新网页</button>
    <script>
        /* 
        location : 网页地址栏
        location三个方法 ：
            1. location.assign('url') : 跳转网页
                等价写法:   location.href = 'url'
            2. location.replace('url') : 替换网页 (无法返回)
            3. location.reload() : 刷新网页 (一般用于移动端)
        */    

        console.log( window.location )

        //1. href属性: 完整的url网址
        //作用：实现页面跳转
        // location.href = 'http://www.baidu.com'
        
        //2 hostname: 主机名/域名/ip
        
        // location.assign() : 跳转网页
        document.querySelector('.assign').addEventListener('click',function(){
            // assign()方法和  location.href 完全等价
            location.assign('http://www.baidu.com')
        })
        
        // location.replace() : 替换网页
        document.querySelector('.replace').addEventListener('click',function(){
            // 替换无法返回上一页
            location.replace('http://www.baidu.com')
        })

        // location.reload() : 刷新网页
        document.querySelector('.reload').addEventListener('click',function(){
            //刷新
            location.reload()
        })
        
    </script>
</body>
</html>

3.history对象: 历史记录

history对象三个方法:

    history.back() :  返回上一页
    history.forward() :  前进下一页
    history.go() :  跳转指定历史记录
        0 : 刷新
        负数: 返回  -1返回一页  -2返回两页
        正数: 前进  1前进一页  2前进两页

4.navigator对象 : 浏览器信息

作用：收集用户数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        navigator对象 : 浏览器信息
        作用：收集用户数据
        */    

        console.log( window.navigator )
        console.log( navigator.userAgent )//获取 操作系统 浏览器版本
        
        
    </script>
</body>
</html>

5.screen对象

screen对象 : 获取用户电脑屏幕大小
一般用于游戏

二、定时器

setInterval 与 setTimeout区别

1.定时器 : 一段代码间隔时间执行

2.定时器语法 :

setInterval() : 永久定时器. 一旦开启永久重复执行，只能手动清除

        开启:   let timeID = setInterval( function(){} , 时间间隔 )
        清除:   clearInterval( timeID )

setTimeout() : 一次定时器。间隔时间内只会执行一次，完毕后自动清除

         开启:   let timeID = setTimeout( function(){} , 时间间隔 )
         清除:   clearTimeout( timeID )

二、存储对象

1.localStorage作用 : 本地存储

经典场景: 免登录

2.localStorage语法 :

		2.1 存数据:  localStorage.setItem('属性名',属性值)
        2.2 取数据:  localStorage.getItem('属性名')
            有返回值
        2.3 删数据:  localStorage.removeItem('属性名')
        2.4 清空数据 : localStorage.clear()

3.localStorage注意点 :

        (1) 永久存储,只要不手动清除。一直存在
        (2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储

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

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

<body>
    <button class="btn1">存数据</button>
    <button class="btn2">取数据</button>
    <button class="btn3">删数据</button>
    <button class="btn4">清空数据</button>

    <script>
        /* 
        1.localStorage作用 : 本地存储
            经典场景: 免登录

        2.localStorage语法 : 
            2.1 存数据:  localStorage.setItem('属性名',属性值)
            2.2 取数据:  localStorage.getItem('属性名')
                有返回值
            2.3 删数据:  localStorage.removeItem('属性名')
            2.4 清空数据 : localStorage.clear()

        3.localStorage注意点 : 
            (1) 永久存储,只要不手动清除。一直存在
            (2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储
        
        必问面试题 : localStorage与sessionStorage区别 
        */

        //存数据:  localStorage.setItem('属性名',属性值)
        document.querySelector('.btn1').addEventListener('click', function () {
            localStorage.setItem('username', 'admin')
            localStorage.setItem('password', '654321')
            localStorage.setItem('sex', '男')
            localStorage.setItem('age', 20 )
        })

        //取数据:  localStorage.getItem('属性名')
        document.querySelector('.btn2').addEventListener('click', function () {
            let username = localStorage.getItem('username')
            console.log(username)
        })

        //删数据:  localStorage.removeItem('属性名')
        document.querySelector('.btn3').addEventListener('click', function () {
            localStorage.removeItem('sex')
        })
        //清空数据 : localStorage.clear()
        document.querySelector('.btn4').addEventListener('click', function () {
            localStorage.clear()
        })
    </script>
</body>

</html>

2.sessionStorage作用 : 临时存储

经典场景: 页面传值(移动端)

2.sessionStorage语法 :

        2.1 存数据:  sessionStorage.setItem('属性名',属性值)
        2.2 取数据:  sessionStorage.getItem('属性名')
            有返回值
        2.3 删数据:  sessionStorage.removeItem('属性名')
        2.4 清空数据 : sessionStorage.clear()

3.sessionStorage注意点 :

        (1) 临时存储,只要页面关闭，就会自动清除
        (2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储

必问面试题 : localStorage与sessionStorage异同点

        相同点: 功能相同,都是存储数据
            (1)功能相同,都是存储数据
            (2)都有大小限制,一般浏览器上限是5MB 
        不同点: 存储方式不同
            (1)localStorage : 硬盘存储
            (2)sessionStorage: 内存存储

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

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

<body>
    <button class="btn1">存数据</button>
    <button class="btn2">取数据</button>
    <button class="btn3">删数据</button>
    <button class="btn4">清空数据</button>

    <script>
        /* 
        1.sessionStorage作用 : 临时存储
            经典场景:  页面传值(移动端)

        2.sessionStorage语法 : 
            2.1 存数据:  sessionStorage.setItem('属性名',属性值)
            2.2 取数据:  sessionStorage.getItem('属性名')
                有返回值
            2.3 删数据:  sessionStorage.removeItem('属性名')
            2.4 清空数据 : sessionStorage.clear()

        3.sessionStorage注意点 : 
            (1) 临时存储,只要页面关闭，就会自动清除
            (2) 只能存储字符串类型数据,如果是其他类型,系统会自动转成字符串，然后存储
        
        必问面试题 : localStorage与sessionStorage异同点
            相同点: 功能相同,都是存储数据
                (1)功能相同,都是存储数据
                (2)都有大小限制,一般浏览器上限是5MB 
            不同点: 存储方式不同
                (1)localStorage : 硬盘存储
                (2)sessionStorage: 内存存储

        localStorage如何存储对象类型数据?  : json存储
        */

        //存数据:  sessionStorage.setItem('属性名',属性值)
        document.querySelector('.btn1').addEventListener('click', function () {
            sessionStorage.setItem('username', 'admin')
            sessionStorage.setItem('password', '654321')
            sessionStorage.setItem('sex', '男')
            sessionStorage.setItem('age', 20 )
        })

        //取数据:  sessionStorage.getItem('属性名')
        document.querySelector('.btn2').addEventListener('click', function () {
            let username = sessionStorage.getItem('username')
            console.log(username)
        })

        //删数据:  sessionStorage.removeItem('属性名')
        document.querySelector('.btn3').addEventListener('click', function () {
            sessionStorage.removeItem('sex')
        })
        //清空数据 : sessionStorage.clear()
        document.querySelector('.btn4').addEventListener('click', function () {
            sessionStorage.clear()
        })
    </script>
</body>

</html>

总结

提示：这里对文章进行总结：
例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

前端-公瑾

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web APIs

文章目录一、Window对象1. window对象 : 浏览器窗口2. location : 网页地址栏3.history对象: 历史记录4.navigator对象 : 浏览器信息5.screen对象二、定时器二、存储对象1.localStorage作用 : 本地存储2.sessionStorage作用 : 临时存储总结一、Window对象1. window对象 : 浏览器窗口window对象三个特点 (1)window是js中的顶级对象。所有的全局函数、全局变量都是window对象的
复制链接

扫一扫