BOM的相关知识

一、基本概念BOM

Browser Object Model    浏览器 对象 模型        

概念：指存放在操作浏览器指令的对象集合

(一)、组成

location 、history 、navigator 、screen 、window

二、基本操作

(一)、location: 地址栏对象

1. href: 用于操作浏览器的地址

可以设置或获取浏览器地址栏中的内容

 (二)、navigator:信息栏(了解)

1、appName: 浏览器名称

2、appVersion: 浏览器版本

3、platform: 浏览器平台

(三)、history: 历史记录

1、go(了解)

(1)、格式 history.go(n)

跳转到历史记录中的第n张网页

(四)、screen: 屏幕

1、width:  屏幕宽度

2、height: 屏幕高度 

3、availWidth:屏幕可用宽度

4、availHeight:屏幕可用高度

(五)、window: 窗口

1、innerWidth:窗口宽度

2、 innerHeight:窗口高度

3、close:关闭当前窗口

4、open:打开(弹出)一个新窗口

格式：Window.open(“窗口内容”,”窗口名称”,”窗口信息”)

窗口信息 包含窗口大小、位置等

例如:

点击打开按钮，弹出一个新窗口，内容为welcome.html中的内容

名称为hy,宽度为200像素,高200像素，记录窗口左边300像素，距离顶部100像素

 三、高级H5对象

(一)、sessionStorage

浏览器中用于存储数据的一种工具

缺点:一旦关闭浏览器,将会消失

(二)、cookie

浏览器中用于存储数据的一种工具,具有时效性

缺点:  1、大小只有4KB            2、操作不方便                3、现在一般用Token替代

(三)、localStorage

1、概念

浏览器中用于永久存储数据的一种工具

优点：操作方便 5MB

2、属性

(1). setItem:保存/修改内容

格式:

localStorage.setItem(“属性名”,”属性值”)

例如

:

 通过打开浏览器 按F12-->应用(application)-->本地存储即可看到

注意事项！！！

如果属性名不存在,就是追加属性;如果存在,就是修改属性

(2). getItem:

格式:

localStorage.getItem(“属性名”);

注意事项！！！

本地存储 会把数据保存到 当前浏览器中，换个浏览器将不能访问

例如:

在谷歌浏览器中的本地存储,在火狐浏览器中将不能访问

(3). removeItem:删除属性

格式:

localStorage.removeItem(“属性名”);

例如: