JS-BOM编程

BOM编程

BOM是Browser Object Model的缩写，即浏览器对象模型

BOM是由一系列的对象组成，是访问、控制、修改浏览器的属性和方法（通过window对象及属性的一系列方法控制浏览器行为的一种编程）

window对象

window对象是浏览器提供给我们使用的，无需自己创建

  • window顶级对象：代表整个浏览器窗口

    • history对象：代表浏览器的访问历史

    • location对象：代表浏览器的地址栏

    • screen对象：代表屏幕

    • navigator对象：代表浏览器软件本身

    • document对象：代表浏览器窗口目前解析的html文档

    • console对象：代表浏览器开发者工具的控制台

    • localStorage对象：代表浏览器本地数据持久化储存

    • sessionStorage对象：代表浏览器本地数据会话级储存

  • window对象的API

  • history属性的API

  • location属性的API

  • console属性的API

    • log()：使用控制台打印日志

三种弹窗方式

我们在前文已经学习到了三种弹窗方式，这三个API都是window对象本身的API

*在使用API时，我们的window.可省略不写*

Storage API

  • sessionStorage属性的API
    • setItem()：存储数据
    • getItem()：读取数据
    • removeItem()：删除数据
  • localStorage属性的API
    • setItem()：存储数据
    • getItem()：读取数据
    • removeItem()：删除数据
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!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>
      function fun1() {
        //使用key,value的键值对方式对storage进行存放数据
        sessionStorage.setItem("keya", "valueA");
        localStorage.setItem("keyb", "valueB");
      }
      function fun2() {
        //使用key对storage进行读取数据
        console.log(sessionStorage.getItem("keya"));
        console.log(localStorage.getItem("keyb"));
      }
      function fun3() {
        //使用key对storage进行删除数据
        sessionStorage.removeItem("keya");
        localStorage.removeItem("keyb");
      }
    </script>
  </head>
  <body>
    <button id="btn1" onclick="fun1()">存数据</button>
    <button id="btn2" onclick="fun2()">读数据</button>
    <button id="btn3" onclick="fun3()">删数据</button>
  </body>
</html>
JAVA > java-web
JS-BOM编程
http://blog.170827.xyz/2024/03/31/JS-BOM编程/
作者
XIAOBAI
发布于
2024年3月31日
许可协议