webApi04

---

小概

本章学习内容：BOM对象介绍，location对象，history对象，navigator对象，screen对象，localStorage与sessionStorage异同点介绍。

---

1. window对象

1.1 window对象介绍

1.window对象 是js中的顶级对象 ： 所有的全局函数，全局变量，document都是它的属性
2.只要是window对象的成员(属性和方法统称),在使用时都可以省略window
3.window对象有一个特殊的属性name , 它的值一定是string类型

1.2 window对象的方法

window对象两个常用方法
open() : 打开新窗口
close() : 关闭窗口

        //open() : 打开新窗口
        document.querySelector('#btn1').onclick = function(){
            /**
            * @description:开启窗口
            * @param {string} : url 窗口网址 
            * @param {string} : name : 类似于a标签的target _self  _blank(默认值)
            * @param {string} : features : 特征。 打开新窗口的大小 和 位置 
            * @param {boolean} : replace : 是否将打开的链接放入历史记录
                true - URL 替换浏览历史中的当前条目。 
                false - URL 在浏览历史中创建新的条目。 
            * @return: 
            */
            window.open('http://www.itheima.com','_blank','width=300px,height=300,left=1066px,top=428px');
        };

        //close() : 关闭窗口 
        document.querySelector('#btn2').onclick = function(){
            window.close();
        };

1.3 window对象的事件

• window对象3个事件：对应网页从打开到关闭三个特殊时刻
  1. window.onload: 页面加载事件，页面DOM+外部资源加载完毕后执行
  2. window.onbeforeunload: 页面关闭事件：页面即将关闭的时候执行
  3. window.onunload: 页面关闭事件：页面正在关闭，这个方法一走完页面就关闭了

        /* 无法获取：因为代码从上往下解析的，此时body内容还没有加载 */
        let box = document.querySelector('.box');
        console.log( box );
        

        //1.window.onload : 页面加载事件， 页面DOM + 外部资源加载完毕后执行
        window.onload = function () {
            console.log('页面加载完毕： DOM树 + 外部资源路径');
            //应用 ： 获取页面元素
            let box = document.querySelector('.box');
            console.log( box );
        };

        //2.window.onbeforeunload : 页面关闭事件 ： 页面即将关闭的时候执行
        window.onbeforeunload = function () {
            console.log('用户点击了xx，我快要关闭了');
            //应用： 存储一些重要数据

            // while(true){
            //     window.open('http://www.baidu.com');
            // };

        };

        //3.window.onunload : 页面关闭事件 ： 页面正在关闭，这个方法一走完页面就关闭了
        window.onunload = function () {
            console.log('我正在关闭，方法一走完页面就消失了');
        };

2. location对象

location对象 ： 操作浏览器地址栏
三个方法：
assign() : 打开网页 (可以回退)
* 简写语法： location.href = 网址
replace() : 替换网页 （不可以回退）
reload() : 刷新网页

        console.log( window.location );
        console.log( window.location === location );

        //常用：完整网址
        console.log( location.href );
        //主机名：ip名/域名
        console.log( location.hostname );


        //assign() : 打开网页
        btn1.onclick = function(){
            /* 常用 */
            // location.assign('http://www.baidu.com');
            /* 简写形式 */
            location.href = 'http://www.baidu.com';
        };
        //replace() : 替换网页
        btn2.onclick = function(){
            location.replace('http://www.baidu.com');
        };
        //reload() : 刷新网页
        btn3.onclick = function(){
            //刷新网页： 相当于F5
            location.reload();
        };

3. history对象

• history对象：操作浏览器历史记录

	history    // 浏览器历史记录
	history.back() //退回上一页
	history.forward()  //下一页

4. navigator对象

• navigator对象：浏览器信息
  1. 场景1 ：数据统计功能（统计用户信息）
  2. 场景2：大数据杀熟

        console.log( navigator );//浏览器信息对象
        console.log( navigator.userAgent );//用户代理 ： 操作系统名字/版本  浏览器名字/版本

5. screen对象

• screen对象：用户电脑可用宽高

        console.log( screen );

6.localStorage

1. localStorage作用：本地储存数据（经典场景：免登录）
2. 语法：
   存数据：localStorage.setItem(‘属性名’,‘属性值’)；
   取数据：localStorage.getItem(‘属性名’)；
   删数据：localStorage.removeItem(‘属性名’)；
   清空数据：localStorage.clear();
3. 注意点：
   1.localStorage是永久存储数据，除非手动删除否则一直都在
   2.只能存储字符串类型，如果是其他类型编译器会自动转成string来存储

        document.querySelector('#setItem').onclick = function(){
            localStorage.setItem('username','admin');
            localStorage.setItem('password','8910');
            localStorage.setItem('hobby',['学习','敲代码','上课']);
        };
        //getItem:取数据
        document.querySelector('#getItem').onclick = function(){
            let username = localStorage.getItem('username');
            let password = localStorage.getItem('password');
            console.log( username,password );
            
        };
        //removeItem:删数据
        document.querySelector('#removeItem').onclick = function(){
            localStorage.removeItem('hobby');
        };
        //clear:清空数据
        document.querySelector('#clear').onclick = function(){
            //删除所有
            localStorage.clear();
        };

7.sessionStorage

localStorage与sessionStorage所有的语法作用都是一致的,唯一的区别是 ：sessionStorage页面一关闭就没有了。
sessionStorage场景：页面间传参
比如：注册页面，页面之间的参数传递（页面A传递到页面B）

localStorage和sessionStorage 的异同点：
相同点： 作用一致，都是存储数据
不同点： 存储方式不同
localStorage永久存储 ： 存储在硬盘
sessionStorage临时存储 ：存储在内存

---

总结

在window对象三个事件中window.onload — window.onbeforeunload — window.onunload,获取页面元素应写在window.onload函数中，防止页面未加载完成无法获取元素；还有一个有趣的小bug，大家可以试试 在window.onbeforeunload内写一个死循环，最好循环体里面带点操作，比如open(‘newpage’)什么的，然后你就发现 你关闭页面前会触发你写的死循环然后浏览器就蹦了(谷歌有类似检查代码的会把死循环什么的自动屏蔽，ie没有)。还有就是localStorage和sessionStorage比较重要，应该记牢、就这些吧，加油少年！