1 概述

浏览器对象模型。

• 操作浏览器部分功能的API。比如让浏览器自动滚动。

BOM的结构图

• window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
• DOM是BOM的一部分。

2 windows对象

• window对象是JavaScript中的顶级对象。
• 全局变量、自定义函数也是window对象的属性和方法。
• window对象下的属性和方法调用时，可以省略window。

系统对话框有三种：

alert();    //不同浏览器中的外观是不一样的
confirm();  //兼容不好
prompt();   //不推荐使用

2-1 alert()

alert(1)是window.alert(1)的简写，因为它是window的子方法。

window.alert('mjj'); //弹出对话框显示字符串'mjj'（确定）

2-2 confirm()

var a = window.confirm('你确定要离开网站吗'); //弹出对话框（取消/确定）
console.log(a); //当点击取消返回false，确定返回true

2-3 prompt()

var name = window.prompt('请输入你的女票姓名：','lww');//弹出对话框输入文本内容（取消/确定）;'lww'默认值
console.log(name); //点击取消返回null，输入内容并确定返回内容字符串

2-4 close

window.close();  //关闭当前窗口

2-5 open

var res = window.confirm('是否发开新窗口');
if (res){
  window.open('http://www.baidu.com','_blank','width=800px','height=500px','left=200px','top=200px');
}else {
    window.close();
}

3 location对象

window.location可以简写成location。location相当于浏览器地址栏，可以将url解析成独立的片段。

location对象的属性

• href 整个链接地址
• hash 返回url中#后面的内容，包含#
• host 主机名，包括端口
• hostname 主机名
• pathname url中的路径部分
• protocol 获取网页协议 一般是http、https
• search 查询字符串
• port 获取端口号
• replace 网页跳转（当前窗口）
• href = ‘http://www.baidu.com‘ 页面跳转（当前窗口）
• assign 页面跳转（当前窗口）
• reload 页面刷新

<form>
    <input type="text" name="user">
    <input type="password" name="pwd">
    <input type="submit">
</form>
<script>
    console.log(location.hostname);
    // localhost
    console.log(location.href);
    // http://localhost:63342/web2.0/day4/03location%E5%AF%B9%E8%B1%A1.html?user=qwe&pwd=123
    console.log(location.pathname);
    // /web2.0/day4/03location%E5%AF%B9%E8%B1%A1.html
    console.log(location.port);
    // 63342
    console.log(location.protocol);
    // http:
    console.log(location.search);
    // ?user=qwe&pwd=123
    console.log(location.hash);
    //
    console.log(location.host);
    // localhost:63342
  	location.replace('https://www.baidu.com');
    location.href = 'http://www.baidu.com';
    location.assign('https://www.baidu.com');
    location.reload();
</script>

3-1 获取窗口账户密码

获取窗口账户密码

http://localhost:63342/web2.0/day4/04小案例.html?user=qwe&pwd=123

function getQueryString() {
  //1.取得去掉?的查询的字符串
  var qs = location.search.length > 0 ? location.search.substring(1):'';
  //2.取得每一项存放到数组中
  var items = qs.length ? qs.split('&'):[]; //["user=qwe", "pwd=123"]
  var item = null,name = null,value = null,args = {};
  for (var i = 0; i < items.length; i++){
    item = items[i].split('=');
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    if (name.length){
      args[name] = value;
    }
  }
  return args; //{user: "qwe", pwd: "123"}
}
var args = getQueryString();
console.log(args.user);
console.log(args.pwd);

3-2 2秒之后跳转百度的web页面

window.location.reload(); //全局刷新页面，相当于浏览器导航栏上 刷新按钮

//2秒之后跳转百度的web页面
setTimeout(function () {
    location.href = 'https://www.baidu.com'; 
    //此方法有历史记录，有后退功能
    location.replace('https://www.baidu.com'); 
    //此方法没有历史记录，没有后退功能
    location.reload(); 
    //2秒之后重新载入一下，刷新
},2000);

4 navigator对象

4-1 plugins

window.navigator 的一些属性可以获取客户端的一些信息。

• userAgent：系统，浏览器)

• platform：浏览器支持的系统，win/mac/linux

  console.log(navigator.userAgent);
  console.log(navigator.platform);
  

4-2 检测是否有插件

console.log(navigator.plugins);
function hasPlugin(name) {
  //如果有插件返回true反之亦然
  name = name.toLowerCase();
  for (var i = 0; i < navigator.plugins.length; i++){
    if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
      //有此插件
      return true;
    }else {
      return false;
    }
  }
}
alert(hasPlugin('Flash'));
alert(hasPlugin('Chrome PDF Plugin'));

5 history对象

1、后退：

• history.back()
• history.go(-1)：0是刷新

2、前进：

• history.forward()

• history.go(1)

  用的不多。因为浏览器中已经自带了这些功能的按钮：

setTimeout(function () {
    history.go(0); //0代表刷新；1代表前进；-1代表后退
},2000);

6 本地存储对象

使用存储对象的过程中，对按Esc可退出全屏 口进行保存的,所以js不能获取当前页面以外其他域名端口保存到本
地的数据。也就是说我们存储对家获取数据只能是自己当前端口或者域名下曾经设置过的数据,一旦端 口或者域名
改变,则无法获取原来的数据。

//localStorage 本地永久存储
localStorage.setItem('name','lxx'); //保存一个数据到存储对象
localStorage.name = 'lxx'; //保存一个数据到存储对象

localStorage.getItem('name'); //获取存储对象中指的的变量数据
localStorage.name; //获取存储对象中指的的变量数据

localStorage.removeItem('name'); //从存储对象中删除指定的变量数据
localStorage.clear(); //从存储对象中删除所有的变量数据

//sessionStorage 本地会话存储
sessionStorage.setItem('name','lxx'); //保存一个数据到存储对象
sessionStorage.name = 'lxx'; //保存一个数据到存储对象

sessionStorage.getItem('name'); //获取存储对象中指的的变量数据
sessionStorage.name; //获取存储对象中指的的变量数据

sessionStorage.removeItem('name'); //从存储对象中删除指定的变量数据
sessionStorage.clear(); //从存储对象中删除所有的变量数据

localStorage和sessionStorage的区别:
1、localStorage和sessionStorage- 一样都是用来存储客户端临时信息的对象。

2、他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器
对其进行实现)。

3、localStorage生 命周期是永久，这意味着除非用户显示在浏览器提供的Ul.上清除localStorage信息，否则这些信息将永远存在。

4、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

5、不同浏览器无法共享localStorage或sessionStorage中的信息。 相同浏览器的不同页面间可以共享相同的localStorage (页 面属于相同域名和端口)， 但是不同页面或标签夏间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。