JavaScript中BOM的重要内容总结

一、BOM介绍

　　BOM（Browser Object Model），浏览器对象模型；

　　用来操作浏览器部分功能的API；

　　BOM由一系列的对象构成，由于主要用于管理窗口和窗口之间的通讯，所以核心对象是window。

二、BOM的结构

　　BOM中，主要是对象。比如：移动、调整浏览器大小的window对象；用于导航的location对象与history对象；获取浏览器、操作系统与用户屏幕信息的navigator与screen对象；可以使用document作为访问HTML文档的入口，管理框架的frames对象等。

JavaScript中BOM的重要内容总结-LMLPHP

三、BOM中的常用对象

3.1 window对象

　　(1)window对象是BOM的顶层（核心）对象。所有对象都是通过它延伸出来的。

　　(2)全局变量、自定义函数也是window对象的属性和方法。

　　(3)window对象下的属性和方法调用时，可以省略window。

　　例如：可以弹出系统对话框、打开（关闭）窗口　

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <!-- 需求： 点击按钮 打开新的窗口  路飞学城 -->

     <!-- a标签默认是在当前窗口打开新的网址 -->

     <a href="http://www.luffycity.com" target="_blank">路飞</a>

     <button>luffy</button>

     <script type="text/javascript">

         var oBtn = document.getElementsByTagName('button')[0];

         oBtn.onclick = function(){

             // 默认在新的窗口打开 网址  _blank

             // window.open('http://www.baidu.com','_self');

             // window可以省略不写

             open('http://www.baidu.com','_self');

             // 关闭窗口

             // window.close();

         }

     </script>

 </body>

 </html>

3.2 location对象

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

location对象的属性部分如下图：、

JavaScript中BOM的重要内容总结-LMLPHP

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <!-- <form action="https://www.baidu.com/s" target = '_blank'>

         <input type="text" name="wd" placeholder="请输入城市">

         <input type="submit" value="搜索">

     </form> -->

     <script type="text/javascript">

         console.log(window.location);

         setTimeout(function(){

             location.href = 'https://www.baidu.com';

         }, 5000)

     </script>

 </body>

 </html>

3.3 history对象

　　3.3.1 前进：

　　　　　　history.go(1)

　　　　　　history.forward()

　　3.3.2 后退

　　　　　　history.gon(-1)

　　　　　　history.back()

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <a href="./index.html">新网页</a>

     <button id="forward">前进</button>

     <button id="refresh">刷新</button>

     <script type="text/javascript">

         alert(1);

         function $(id){

             return document.getElementById(id);

         }

         $('forward').onclick = function(){

             // 表示前进

             window.history.go(1);

         }

         $('refresh').onclick =  function(){

             // 表示刷新

             // 不常用  因为因为全局刷新

             // window.history.go(0);

             window.location.reload();

             // 局部作用域刷新  使用的技术 ajax后面 介绍

         }

     </script>

 </body>

 </html>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <button id="back">后退</button>

     <script type="text/javascript">

         function $(id){

             return document.getElementById(id);

         }

         $('back').onclick = function(){

             // 表示后退

             window.history.go(-1);

         }

     </script>

 </body>

 </html>

四、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)监听本地存储的变化

　　　　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);

})

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <div>

         <input type="text" name="user" id="user">

         <input type="button" id="btn" value="保存">

     </div>

     <ul id="lists">

     </ul>

     <button id='clear'>清除</button>

     <script type="text/javascript">

         var oBtn = document.getElementById('btn');

         var oUser = document.getElementById('user');

         var oLists = document.getElementById('lists');

         var li  = document.createElement('li');

         oBtn.onclick = function(){

             var val = oUser.value

             localStorage.setItem('name', val);

             oUser.value = '';

             li.innerHTML = val;

             oLists.appendChild(li)

         }

         window.onload = function(){

             if (localStorage.getItem('name')) { //有值

                 var value = localStorage.getItem('name');

                 li.innerHTML = value;

                 oLists.appendChild(li);

             }

             // document.getElementById('clear').onclick = function(){

             //     localStorage.clear();

             //     window.location.reload();

             // }

             document.getElementById('clear').addEventListener('click',function(){

                     localStorage.clear();

                     window.location.reload();

             },false);

             // removeEventListener(type: DOMString, callback: EventListener, capture?: boolean)

         }

         // localStorage

         // var arr = [{"title":"adad","done":false}];

         // var name = 'alex'

     </script>

 </body>

 </html>

完！