web API-day06-Window对象,swiper 插件

一, Window对象

1. BOM(浏览器对象模型)

BOM(Browser Object Model ) 是浏览器对象模型

window 是浏览器内置中的全局对象，我们所学习的所有 Web APIs 的知识内容都是基于 window 对象实现的

window 对象下包含了 navigator、location、document、history、screen 5个属性，即所谓的 BOM （浏览器对象模型）

document 是实现 DOM 的基础，它其实是依附于 window 的属性。

注：依附于 window 对象的所有属性和方法，使用时可以省略 window

2. 延时器

JavaScript 内置的，用来让代码延迟执行的函数，叫 setTimeout

语法：

setTimeout 仅仅只执行一次，平时省略window

清除延时函数：

setInterval 会执行几次？ setTimeout呢？

setInterval 会每隔一段时间就执行，n次

setTimeout 延时执行，只执行 1 次

3. JS执行机制

见图

执行机制

4. location对象

location对象，保存了 URL 地址的各个组成部分

常用属性

Ø href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转

location对象，保存了 URL 地址的各个组成部分

其他属性和方法：

Ø search 属性获取地址中携带的参数，符号 ？后面部分

Ø hash 属性获取地址中的哈希值，符号 # 后面部分,后期vue路由的铺垫，实现单页应用，比如 网易云音乐

Ø reload 方法用来刷新当前页面

5. navigator对象

navigator对象记录了浏览器自身的相关信息

常用属性

Ø 通过 userAgent 检测浏览器的版本及平台

// 检测 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' 
     } 
   })()

6. histroy对象

history 对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等

常用属性和方法：

history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。

二, swiper 插件

插件

学习插件的基本过程

Ø熟悉官网,了解这个插件可以完成什么需求 https://www.swiper.com.cn/

Ø看在线演示, 找到符合自己需求的demo https://www.swiper.com.cn/demo/index.html

Ø查看基本使用流程 https://www.swiper.com.cn/usage/index.html

Ø查看APi文档,去配置自己的插件 https://www.swiper.com.cn/api/index.html

Ø注意: 多个swiper同时使用的时候,类名需要注意区分

三, 本地储存

本地存储特性

1、数据存储在用户浏览器中

2、页面刷新不丢失数据

3、容量较大, 约 5M 左右

localStorage

1. 生命周期永久生效，除非手动删除 否则关闭页面也会存在
2. 以键值对的形式存储使用

存储数据：

获取数据：

删除数据：

存储复杂数据类型存储

本地只能存储字符串, 无法存储复杂数据类型

需要将复杂数据类型转换成JSON字符串,在存储到本地

JSON.stringify(复杂数据类型)

将复杂数据转换成JSON字符串 存储 本地存储中

JSON.parse(JSON字符串)

将JSON字符串转换成对象 取出 时候使用

1\. 本地存储，如何实现永久存储？ 
通过 localStorage 实现 

2\. localStorage的方法 
存储： localStorage.setItem(key, value) 
获取： localStorage.getItem(key) 
移除： localStorage.removeItem(key) 

3\. 存储复杂数据，如何将其转成JSON字符串 
JSON.stringify() 

4\. 获取本地存储的JSON字符串，如何将其转成JS对象 
JSON.parse()