--- title: Web APIs - 第5天笔记 id: 6ab68aa9-3240-4df5-a459-4ab92c075e1c date: 2025-02-22 22:20:13 auther: zhy cover: http://gcore.jsdelivr.net/gh/zhynxq/photo/1.jpg excerpt: Web APIs - 第5天笔记 目标： 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力 BOM操作 综合案例 js组成 JavaScript的组成 ECMAScript 规定了js基础语法核心知识。 比如：变量、分支语句、循环语句、对象等等 Web APIs DOM 文档对象模 permalink: /archives/web-apis---di-5tian-bi-ji categories: - javascript --- # Web APIs - 第5天笔记 \> 目标： 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力 - BOM操作 - 综合案例 ## js组成 JavaScript的组成 - ECMAScript: - 规定了js基础语法核心知识。 - 比如：变量、分支语句、循环语句、对象等等 - Web APIs : - DOM 文档对象模型， 定义了一套操作HTML文档的API - BOM 浏览器对象模型，定义了一套操作浏览器窗口的API !\[67604738945\](http://gcore.jsdelivr.net/gh/zhynxq/photo/1676047389456.png) ## window对象 \*\*BOM\*\* (Browser Object Model ) 是浏览器对象模型 - window对象是一个全局对象，也可以说是JavaScript中的顶级对象 - 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的 - 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法 - window对象下的属性和方法调用的时候可以省略window !\[67604743636\](http://gcore.jsdelivr.net/gh/zhynxq/photo/1676047436362.png) ## 定时器-延迟函数 JavaScript 内置的一个用来让代码延迟执行的函数，叫 setTimeout \*\*语法：\*\* \~\~\~JavaScript setTimeout(回调函数, 延迟时间) \~\~\~ setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行, 平时省略window 间歇函数 setInterval : 每隔一段时间就执行一次， , 平时省略window 清除延时函数： \~\~\~JavaScript clearTimeout(timerId) \~\~\~ \>注意点 \> \>1. 延时函数需要等待,所以后面的代码先执行 \>2. 返回值是一个正整数，表示定时器的编号 \~\~\~html \~\~\~ ## location对象 location (地址) 它拆分并保存了 URL 地址的各个组成部分， 它是一个对象 \| 属性/方法 \| 说明 \| \| --------- \| ---------------------------------------------------- \| \| href \| 属性，获取完整的 URL 地址，赋值时用于地址的跳转 \| \| search \| 属性，获取地址中携带的参数，符号 ？后面部分 \| \| hash \| 属性，获取地址中的啥希值，符号 # 后面部分 \| \| reload() \| 方法，用来刷新当前页面，传入参数 true 时表示强制刷新 \| \~\~\~html 搜索 [音乐](#/music) [下载](#/download) 刷新页面 \~\~\~ ## navigator对象 navigator是对象，该对象下记录了浏览器自身的相关信息 常用属性和方法： - 通过 userAgent 检测浏览器的版本及平台 \~\~\~javascript // 检测 userAgent（浏览器信息） (function () { const userAgent = navigator.userAgent // 验证是否为Android或iPhone const android = userAgent.match(/(Android);?\[\\s\\/\]+(\[\\d.\]+)?/) const iphone = userAgent.match(/(iPhone\\sOS)\\s(\[\\d_\]+)/) // 如果是Android或iPhone，则跳转至移动站点 if (android \|\| iphone) { location.href = 'http://m.itcast.cn' }})(); \~\~\~ ## histroy对象 history (历史)是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退等 \*\*使用场景\*\* history对象一般在实际开发中比较少用，但是会在一些OA 办公系统中见到。 !\[67604783479\](http://gcore.jsdelivr.net/gh/zhynxq/photo/1676047834796.png) 常见方法： !\[67604784659\](http://gcore.jsdelivr.net/gh/zhynxq/photo/1676047846593.png) \~\~\~html ←后退 前进→ \~\~\~ ## 本地存储（今日重点） 本地存储：将数据存储在本地浏览器中 常见的使用场景： 页面刷新数据不丢失 好处： 1、页面刷新或者关闭不丢失数据，实现数据持久化 2、容量较大，sessionStorage和 localStorage 约 5M 左右 ### localStorage（重点） \*\*作用:\*\* 数据可以长期保留在本地浏览器中，刷新页面和关闭页面，数据也不会丢失 \*\*特性：\*\*以键值对的形式存储，并且存储的是字符串， 省略了window !\[67604963508\](http://gcore.jsdelivr.net/gh/zhynxq/photo/1676049635087.png) \~\~\~html 本地存储-localstorage \~\~\~ ### sessionStorage（了解） 特性： - 用法跟localStorage基本相同 - 区别是：当页面浏览器被关闭时，存储在 sessionStorage 的数据会被清除 存储：sessionStorage.setItem(key,value) 获取：sessionStorage.getItem(key) 删除：sessionStorage.removeItem(key) ### localStorage 存储复杂数据类型 \*\*问题：\*\*本地只能存储字符串,无法存储复杂数据类型. \*\*解决：\*\*需要将复杂数据类型转换成 JSON字符串,在存储到本地 \*\*语法：\*\*JSON.stringify(复杂数据类型) JSON字符串： - 首先是1个字符串 - 属性名使用双引号引起来，不能单引号 - 属性值如果是字符串型也必须双引号 \~\~\~html \~\~\~ \*\*问题：\*\*因为本地存储里面取出来的是字符串，不是对象，无法直接使用 \*\*解决： \*\*把取出来的字符串转换为对象 \*\*语法：\*\*JSON.parse(JSON字符串) \~\~\~html \~\~\~ ## 综合案例 ### 数组map 方法 \*\*使用场景：\*\* map 可以遍历数组处理数据，并且返回新的数组 \*\*语法：\*\* \~\~\~javascript \~\~\~ \>map 也称为映射。映射是个术语，指两个元素的集之间元素相互"对应"的关系。 \> \>map重点在于有返回值，forEach没有返回值（undefined） ### 数组join方法 \*\*作用：\*\*join() 方法用于把数组中的所有元素转换一个字符串 \*\*语法：\*\* \~\~\~html \~\~\~