18BOM 浏览器对象模型

# BOM 浏览器对象模型

# 1、计时器

# 1)无限计时器

let i = 0
setInterval(()=>{
  i++
  console.log(i)
},1000)//这里毫秒为单位

1
2
3
4
5

// 无限次计时器【简写】
setInterval(function () {
    console.log(123);//
}, 2000)

1
2
3
4

# 2)一次性计时器

let i = 0
function timeHandler() {
  setTimeout(() => {
    i++
    console.log(i)
    timeHandler()
  }, 1000);//这里毫秒为单位
}

timeHandler()

1
2
3
4
5
6
7
8
9
10

// 一次性计时器 【简写】
setTimeout(function () {
    console.log(123);
}, 2000)//这里毫秒为单位

1
2
3
4

案例

// 使用一次性计时器，实现无限次计时器的效果
function fn() {
    setTimeout(function () {
        console.log("这是一次性计时器哦！");
        fn()//递归
    }, 1000)
}
fn()

1
2
3
4
5
6
7
8

//自己执行自己
function fn() {
    fn()//递归
}

//回调是把别的函数当成参数执行
function fn(f) {
    f()
}

1
2
3
4
5
6
7
8
9

# 3)清空无限计时器

let i = 0
let timer = setInterval(()=>{
  i++
  console.log(i)
},1000)

clearInterval(timer)

1
2
3
4
5
6
7

# 4)清空一次性计时器

let timer = setTimeout(() => {
  i++;
  console.log(i);
  timeHandler();
}, 1000);
clearTimeout(timer);

1
2
3
4
5
6

案例

<body>
    <button>按钮</button>
    <script>
        //3)清空无限计时器
        var timeHandler = setInterval(function () {
            console.log(123);
        }, 1000)
        var btn = document.querySelector("button")
        btn.onclick = function () {
            clearInterval(timeHandler)
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9
10
11
12
13

清空即开始

<body>
    <button class="stop">暂停</button>
    <button class="start">开始</button>
</body>
<script>
    var timeHandler
    var i = 0
    function time() {
        timeHandler = setInterval(function () {
            console.log(++i);
        }, 1000)
    }

    //开始
    var start = document.querySelector(".start")
    start.onclick = function () {
        clearInterval(timeHandler)
        time()
    }

    //暂停
    var stop = document.querySelector(".stop")
    stop.onclick = function () {
        clearInterval(timeHandler)
        i = 0
    }
</script>

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

# 2、页面栈对象和历史对象

<!--//index.html-->
<!--index页面-->
<button>跳到a页面</button>
<script>
    let btn = document.querySelector("button")
    btn.onclick = ()=>{
        location.href = "a.html"//location是页面栈对象，记录了跳转页面的信息
    }
</script>

<!--a.html-->
<!--a页面-->
<button>返回首页</button>
<script>
    let btn = document.querySelector("button")
    btn.onclick = ()=>{
        // history.back()
        history.go(-1)//history是历史记录对象，记录了每一次跳转的信息
    }
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 3、本地缓存

        前端：
            cookie;
            localStorage;
            sessionStorage;

        后端：
            session;

1
2
3
4
5
6
7

session；后端才有使用，跟前端没有关系。

cookie;           
	1、最早，兼容性最好
	2、不能直接在谷歌浏览器下操作，只能使用其他浏览器或者在服务器环境操控
	3、存储数据大小（4kb，谷歌浏览器）
	4、存储条数（20条，谷歌浏览器）
	5、操作繁琐（相对于另外两个）
	6、默认关闭浏览器就会消失，如果想要保存需要设置过期时间

localStorage;本地持久级存储
	1、h5新特性，不能兼容低版本浏览器
	2、默认情况下，永久存储
	3、存储的数据会变成字符串
	4、存储数据大小（5mb，谷歌浏览器）
	5、存储条数（存储条数不限制）
	6、操作相对简单（相对于cookie）

sessionStorage;本地会话级存储
	1、所有特性都与localStorage一样，只有存储时间不同，sessionStorage默认关闭浏览器就消失

微信小程序
	1、有同步异步
	2、不限于只存储字符串，可以直接存对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 1)存储和获取

//默认只能存字符串
localStorage.setItem("name","小明")
console.log(localStorage.getItem("name"))

//存数组需要先转json字符串
localStorage.setItem("obj",JSON.stringify({name:"小明"}))
console.log(JSON.parse(localStorage.getItem("obj")))

1
2
3
4
5
6
7

# 2)删除单个

localStorage.removeItem()

# 3)清空所有

localStorage.clear()

# 案例

//存
localStorage.setItem("name", "小明")

//取
console.log(localStorage.getItem("name"));

1
2
3
4
5

localStorage.setItem("bool", true)
console.log(localStorage.getItem("bool"));

localStorage.setItem("arr", JSON.stringify([{ name: "小明", age: 18 }]))
console.log(JSON.parse(localStorage.setItem("arr")));

1
2
3
4
5

编辑

上次更新: 2022/04/24, 13:33:34

← 17异常错误对象 19DOM文档对象模型→