当前位置：首页 > news >正文

HtML之JavaScript BOM编程

news 来源：原创 2025/5/22 14:46:02

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控制浏览器的属性和行为

<!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>