HtML之JavaScript BOM编程

HtML之JavaScript BOM编程

window

  • history 历史

  • location 地址栏

  • document 浏览器打开的.html文档

  • console F12开发者工具的控制台

  • screen 屏幕

  • navigator 浏览器软件本身(历史原因一直沿用)

  • sessionStorage 会话级存储

  • localStorage 持久级存储
    window对象 API

  • window对象的属性 API

  • history 窗口的访问历史

  • location 地址栏

  • sessionStorage 用于存储一些会话级数据(浏览器关闭,数据清除)

  • localStorage 用于存储一些持久级数据(浏览器关闭数据存在)

  • console log

通过window对象及其属性的API控制浏览器的属性和行为

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
            window 对象是由浏览器提供使用的,无需自己创建(window. 可省略)
                三种弹窗
                 alert
                 prompt
                 confirm

            定时任务
        */
        function fun1() {
            window.alert("信息提示")
        }
        function fun1() {
            window.prompt("信息输入")
        }
        function fun1() {
            window.confirm("信息确认")
        }
        function fun4() {
            window.setTimeout(function () {
                alert("两秒")
            }, 2000)
        }
    </script>
    <script>
        /*
            window属性的API
                history 窗口的访问历史
                location 地址栏
                sessionStorage 用于存储一些会话级数据(浏览器关闭,数据清除)
                localStorage   用于存储一些持久级数据(浏览器关闭数据存在)
                console  log

        */
        function funA() {
            history.forward() // 向前翻页
            // history.go(n)  正数表示前进,负数表示后退 n表示页数
        }
        function funB() {
            history.back() // 向后翻页
        }
        function funcLocation() {
            location.href = "http://www.baidu.com"  // 修改地址栏中的url并跳转
        }
    </script>
    <script>
        function funcSessionStorage1() {
            sessionStorage.setItem("A", 1212)   //类似map是key value格式
            localStorage.setItem("A1", 1212)   //类似map是key value格式
        }
        function funcSessionStorage2() {
            var aaa = sessionStorage.getItem("A")
            var bbb = localStorage.getItem("A1")
            alert(aaa + bbb)
        }
        function funcSessionStorage3() {
            // sessionStorage.removeItem()
            sessionStorage.clear()
            localStorage.clear()
        }
    </script>
</head>

<body>
    <button onclick="fun1()">信息提示</button>
    <button onclick="fun2()">信息输入</button>
    <button onclick="fun3()">信息确认</button>
    <button onclick="fun4()">两秒后提示</button>

    <hr>
    <a href="https://www.baidu.com">百度</a> <!--需要带https 不然会识别为本地文件-->
    <button onclick="funA()">上一页</button>
    <button onclick="funB()">下一页</button>

    <button onclick="funcLocation()">测试Location</button>
    <hr>
    <button onclick="funcSessionStorage1()">测试sessionStorage存储</button>
    <button onclick="funcSessionStorage2()">测试sessionStorage读取</button>
    <button onclick="funcSessionStorage3()">测试sessionStorage清空</button>
</body>

</html>
相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7898 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js