BOM基础原理与应用

一、基本认知

        BOM是browser object model的缩写，简称浏览器对象模型。 

        BOM主要用于管理窗口与窗口之间的通讯，因此核心对象是window。BOM 比 DOM 更大，它包含 DOM。

        BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。主要包括document、location、navigation、screen、history对象。

二、window常见对象

1. location对象

        window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为这个属性返回的是一个对象，所以讲这个属性也称为location对象。

        常见属性：

•         location.href：获取完整URL地址，对齐赋值时用于地址的跳转
•         location.search：获取地址中携带的参数，具体为网址中？后面部分
•         location.hash：获取地址中的哈希值，具体为网址中#后面的部分（哈希值改变页面不跳转，但页面中内容变动）
•         location..reload：强制刷新当前页面

2. navigator对象

        navigator 对象包含有关浏览器自身的信息，最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

        常用：通过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.goudong.com"; //换成自己的网址
        }
      })();

3. history对象

        管理网页的历史记录，例如前进后退。

•         history.back()：后退
•         history.forward()：前进
•         history.go(参数)：参数=1前进一个页面；-1后退一个页面

三、本地存储

1. 概念： 将数据存储在用户浏览器中，刷新页面不丢失数据

2. 语法：

    <script>
        // 本地存储只能存储字符串！
        localStorage.setItem('uname', 'goodboy') // 存(key, value)
        localStorage.getItem('uname') //取
        localStorage.removeItem('uname') // 删

        // 若想保存复杂数据类型(例如对象、数组)，需要把其数据类型转换成json字符串
        const goods = {
            name: 'goodboy',
            gender: 'boy'
        }
        localStorage.setItem('goods', JSON.stringify(goods)) //JSON.stringify(XX)
        const obj = JSON.parse(localStorage.getItem('goods')) //JSON.parse()取出本地存储中的字符串并转为对象
        console.log(obj);
    </script>

未完待续。。。