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>
相关推荐
秋名山大前端17 分钟前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug20 分钟前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn20 分钟前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户214118326360239 分钟前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern41642 分钟前
HTML(面试)
前端
excel1 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴1 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy1 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者1 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王1 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html