BOM

BOM

  • BOM（Browser Object Model）即浏览器对象模型
  • BOM提供了独立于内容 而与浏览器窗口进行交互的对象
  • 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
  • BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
  • BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分

window对象

window对象是BOM的顶层(核心)对象，它表示浏览器的一个实例。所有对象都是通过它延伸出来的，也可以称为window的子对象。

  • 所有浏览器都支持 window 对象.概念上讲.一个html文档对应一个window对象.功能上讲: 控制浏览器窗口的.使用上讲: window对象不需要创建对象,直接使用即可.
  • 方式1：window.open("http://www.baidu.com","_blank")打开百度
  • 方式2：location.href = "http://www.baidu.com" 打开百度
  • window.open('about:blank',"_self")打开空白页
  • window对象是JavaScript中的顶级对象。
  • 全局变量、自定义函数也是window对象的属性和方法。
  • window对象下的属性和方法调用时，可以省略window。
  • 在浏览器中，window 对象有双重角色， 它既是通过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着 在网页中定义的任何一个对象、变量和函数，都以 window 作为其 Global 对象，因此有权访问 parseInt()等方法。

location对象

  • location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息，还提供了一 些导航功能。
  • location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性,换句话说，window.location 和document.location 引用的是同一个对象。
  • location 对象的用处不只表现在它保存着当前文档的信息，还表现在它将 URL 解析为独立的片段，让 开发人员可以通过不同的属性访问这些片段。
  • window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。
属性名例子说明
hash #content” 返回URL中的hash(#),如果没有,则返回空字符串
host “www.apeland.cn:80” 返回服务器名称和端口号
hostname “www.apeland.cn” 返回不带端口号的服务器名称
href “https://www.baidu.com“ 返回当前加载页面的完成URL
pathname ‘’/web/“ 返回url中的目录和文件名
port ‘80’ 返回url中指定的端口号,如果url中不包含端口号,则这个属性返回空字符串
seach “?name=zhangsan” 返回url的查询字符串,这个字符串以问号开头
protocol “https:” 返回页面使用的协议.通常是http:或https:

navigator对象

  • 最早由 Netscape Navigator 2.0 引入的 navigator 对象，现在已经成为识别客户端浏览器的事实标准 ,每个浏览器中的 navigator 对象也都有一套自己的属性
  • userAgent：系统，浏览器
  • platform：浏览器支持的系统，win/mac/linux

history对象

  • history 对象保存着用户上网的历史记录,使用 go()方法可以在用户的历史记录中任意跳转，可以向后也可以向前。这个方法接受一个参数， 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(类似于单击浏览器的“后退”按钮),正数表示向前跳转(类似于单击浏览器的“前进”按钮)
  • 后退：history.back() 或者 history.go(-1)
  • 前进：history.forward() 或者 history.go(1)
  • 刷新：history.go(0)
  • 前进两页：history.go(2)

定时器

  • 在js中有两种定时器
  • 一次性定时器：只在指定的时间后执行一次 setTimeout()
  • 周期性循环定时器: 在指定时间为周期循环执行 setInterval()

HTML5 存储技术 localStorage sessionStorage

  • 对浏览器来说，使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage
  • sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
  • localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在
  • sessionStorage 和 localStorage 的用法基本一致，引用类型的值要转换成JSON
1.保存数据到本地
let info = {
    name: 'Lee',
    age: 20,
    id: '001'
};
sessionStorage.setItem('key', JSON.stringify(info));
localStorage.setItem('key', JSON.stringify(info));

2.从本地存储获取数据
var data1 = JSON.parse(sessionStorage.getItem('key'));
var data2 = JSON.parse(localStorage.getItem('key'));

3.本地存储中删除某个保存的数据
sessionStorage.removeItem('key');
localStorage.removeItem('key');

4.删除所有保存的数据
sessionStorage.clear();
localStorage.clear();

5.监听本地存储的变化
Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage

window.addEventListener('storage', function (e) {
        console.log('key', e.key);
        console.log('oldValue', e.oldValue);
        console.log('newValue', e.newValue);
        console.log('url', e.url);
    })

浏览器查看方法：
进入开发者工具
选择 Application
在左侧 Storage 下 查看 Local Storage 和 Session Storage
Frontend

相关

标签