09 BOM浏览器对象模型

BOM浏览器对象模型

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta http-equiv="X-U-Compatible" content="IE-edge">
  6     <meta name="viewport" content="width=device-width,initial-scale=1">
  7     <title>BOM浏览器对象模型</title>
  8 </head>
  9 <body>
 10     <h1>BOM浏览器对象模型</h1>
 11     <script type="text/javascript">
 12         // 1.window
 13             /*
 14             // 系统对话框alert confirm prompt
 15             window.alert(12345);
 16             var res = window.confirm("are you sure?");
 17             console.log(res);
 18             var str = window.prompt("吃了没","shit?");  // 接收用户输入的值
 19             console.log(str);
 20 
 21             // 延时操作setTimeout(fun,time)
 22             window.setTimeout(function () {
 23                 console.log(1234)
 24             },2000);
 25 
 26             // 每多少秒执行一次setInterval(fun,time)
 27              window.setInterval(function () { console.log(1) },1000);
 28 
 29             var num = 0;
 30             var timer = null;
 31             timer = setInterval(function () {
 32                 num += 1;
 33                 if(num > 3){
 34                     clearInterval(timer);  //清除定时器
 35                     return;  //   结束函数运行
 36                 }
 37                 console.log("num:"+num);
 38             },1000);
 39 
 40             //  open   close
 41             window.open(url="https://www.baidu.com",target="_blank"); // target 新窗口的位置， _blank  _self _parent
 42             window.close();
 43             */
 44         // 2.location
 45             /*
 46             console.log(location.host);
 47             console.log(location.hostname);
 48             console.log(location.port);
 49             console.log(location.href);
 50             console.log(location.pathname);
 51             console.log(location.protocol);
 52             console.log(location.search);
 53             setTimeout(function () {
 54                 location.href = "https://www.baidu.com";  // 会有历史记录
 55                 // location.replace("https://www.baidu.com");// 不会有历史记录
 56                 // location.reload(); // 重新加载网页
 57             },2000)
 58             */
 59 
 60         // 3.window.navigator 的一些属性可以获取客户端的一些信息
 61             /*
 62             console.log(navigator);
 63             console.log(navigator.plugins);
 64             function hasPlugin(name) {
 65                 name = name.toLowerCase();
 66                 for(var i = 0; i < navigator.plugins.length; i ++){
 67                     var pluginsName = navigator.plugins[i].name.toLowerCase()
 68                     if(pluginsName.indexOf(name) != -1){
 69                         console.log(name);
 70                         console.log(pluginsName);
 71                         return "有插件！"
 72                     }
 73                 }
 74                 return "没有插件！"
 75             }
 76             alert(hasPlugin("flash"))
 77             */
 78 
 79         // 4.history
 80             /*
 81                 console.log(history);
 82                 history.go(0);  // 刷新页面
 83                 history.go(-1);  // 后退页面
 84                 history.go(1);  // 前进页面
 85                 history.back();  // 前进页面
 86             */
 87 
 88         // 5.HTML5 存储技术 localStorage sessionStorage
 89             <!--sessionStorage(临时存储)  为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载。关闭浏览器后清除。-->
 90             <!--localStorage(长期存储)  与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在。-->
 91             <!--存储和提取数据时，需要json格式化和解析-->
 92             var person = {
 93                 name:"xiaogang",
 94                 age:18
 95             };
 96             sessionStorage.setItem("personStorage",JSON.stringify(person));
 97             var getPerson = JSON.parse(sessionStorage.getItem("personStorage"));
 98             console.log(getPerson);
 99             //监听本地存储的变化  Storage 发生变化（增加、更新、删除）时的 触发，同一个页面发生的改变不会触发，只会监听同一域名下其他页面改变 Storage
100             window.addEventListener('personStorage', function (e) {
101                 console.log('key', e.key);
102                 console.log('oldValue', e.oldValue);
103                 console.log('newValue', e.newValue);
104                 console.log('url', e.url);
105             });
106             sessionStorage.removeItem("personStorage");  // 删除指定的数据
107             sessionStorage.clear(); // 删除所有的数据
108     </script>
109 </body>
110 </html>

 

posted @ 2019-07-01 15:55  毛斯钢  阅读(214)  评论(0)  编辑  收藏  举报