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>
相关推荐
前端Hardy4 分钟前
Python是怎么将Vue项目打包成桌面端应用程序的?看这篇就够了
前端·javascript·python
Spider_Man16 分钟前
物料区的“超市大冒险”:组件、遥控器与快乐星球的奇遇记 🛒🦄
前端·低代码·typescript
uppp»17 分钟前
echarts在前后端分离项目中的实践与应用
前端·javascript·echarts
之梦19 分钟前
Electron + Vue3开源跨平台壁纸工具实战(九)子进程服务(2)
前端·electron
三小河19 分钟前
css 中 inset属性 以及简单实现spinner
前端
小趴菜_20 分钟前
手把手教你用 Vue3 + LogicFlow 打造流程编排系统
前端·vue.js
MapleWan3206320 分钟前
关于统一地图组件的一些实践与思考
前端·开源
袁煦丞22 分钟前
Bitwarden+cpolar让隐私真正属于自己:cpolar内网穿透实验室第516个成功挑战
前端·程序员·远程工作
前端灵派派22 分钟前
electron窗口管理封装和页面通讯
前端·electron
木浔23 分钟前
SortableJS API 文档
前端·javascript