js bom 浏览器对象

一、定时器

setTimeout()

setTimeout() ：在指定的毫秒数后调用函数或计算表达式。

//定时执行某些代码
setTimeout(() => {
  console.log("1秒");
}, 1000);

setInterval()

setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

var i = 0;
var t = setInterval(() => {
  console.log("定时器");
  if (i == 9) {
    clearInterval(t);
  }
  i++;
}, 1000);

var t2 = setInterval(() => {
  console.log("定时器2");
}, 1000);

console.log("setInterval", t, t2);

二、同步异步

先执行同步,在执行异步
在执行栈从上而下执行语句,将异步操作分配任务列表,然后继续执行后续的代码
当所有的同步都执行完毕，才到事件轮询（event loop）去根据队列中的任务触发条件
是否满足条件,然后执行异步的回调(callback)

console.log("1号");

console.time();
setTimeout(() => {
  //异步
  console.log("2号");
}, 0);
console.timeEnd();
console.log("3号"); //同步

///输出结果 1 .3. 2

三、存储

可以用作登陆凭证（百度）
可以用于请求的传输
浏览器限制大小最多 4kb 左右，个数 20+


<button onclick="setMyCookie()">设置 set</button>
<button onclick="getMyCookie()">获取 get</button>
<button onclick="delMyCookie()">清除 del</button>

function setMyCookie() {
			setCookie('test', 12345)
    }

function getMyCookie() {
			console.log(getCookie('test'));
    }

function delMyCookie() {
			setCookie('test', null, 0)
    }

   /*
   *  expires  过期时间       对照服务器时间（UTC）
   *  domain   域名
   *  path     路径
   *
   */
 function setCookie(name,value, days  ){
     var Days = (days !== undefined ? days: 30 );
     var exp = new Date();   // 当前时间
     exp.setTime(exp.getTime() + Days*24*60*60* 1000); // 设置过期时间
     console.log(exp);
     console.log(exp);
     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toUTCString()+';path=/;';
 }
 function getCookie(name){
     // 例子： "test=12345; name=wer; age=13"
     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
     if(arr=document.cookie.match(reg))
     return unescape(arr[2]);
     else
     return null;
 }

2. storeage

大小 5MB 左右，个数不受限
用于 http 传输时需要手动提取和设置

不管是 localStorage，还是 sessionStorage，可使用的 API 都相同，常用的有如下几个（以 localStorage 为例）：

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的 key：localStorage.key(index);

!> 提示: 键/值对通常以字符串存储，你可以按自己的需要转换该格式。

// localStorage     永久存储
var record = ["周杰伦", "陈奕迅"];
// 设置
// JSON.stringify(数据)  将数据转为JSON字符串
localStorage.setItem("record", JSON.stringify(record));
// 获取
var get_record = localStorage.getItem("record");
// JSON.parse(字符串)  将JSON字符串转为对应数据格式
console.log(JSON.parse(get_record));
// 移除  localStorage.removeItem(数据名)

// sessionStorage    会话存储       页面关闭的时候就会被移除
sessionStorage.setItem("history", "hahaha");

四、跳转

1. location 对象

//地址栏
console.log(location);

1、location.href="url?参数1="+参数1值 //跳转到url(原页面跳转)，是跳到新的页面，可以回退 举个栗子：window.location.href="./页面传参.html?id="+id;	//拼接传递参数
2、location.replace(url);	//跳转到url，替代掉当前页面，不可以回退

3、location.reload();		//重新刷新页面

4、location.search;			//传递的参数放在location.search里面

2. history 历史对象

1、history.back();	//后退页面

2、history.forward();	//前进页面

3、history.go(n);		//n为正数，表示前进n个页面；n为负数，表示后退n个页面

3. 获取 url 参数

//获取url查询字符串的参数
function getQueryString(item) {
  var svalue = location.search.match(
    new RegExp("[?&]" + item + "=([^&]*)(&?)", "i")
  );
  return svalue ? svalue[1] : svalue;
}
//获取其他页面传过来的等级lv,()中写对应的字符串 'lv'
var lv = getQueryString("lv");

五、 window 对象

1、window.confirm("是否确认");	//带有确认的弹窗，返回布尔值
2、window.close();				//关闭当前页面

3、 window.open(url,'_blank');		//打开新页面(新增页面)
    window.open(url,'_self');		//打开新页面(原页面打开)

六、 navigator 对象

navigator.userAgent; //查看浏览器的内核信息
navigator.appCodeName; //浏览器代号
navigator.appVersion; //浏览器版本
navigator.cookieEnabled; //启用Cookies
navigator.platform; //硬件平台
navigator.userAgent; //用户代理
navigator.systemLanguage; //用户代理语言

七、 screen 屏幕对象

document.write("总宽度/高度: ");
document.write(screen.width + "*" + screen.height);
document.write("可用宽度/高度: ");
document.write(screen.availWidth + "*" + screen.availHeight);
document.write("色彩深度: ");
document.write(screen.colorDepth);
document.write("色彩分辨率: ");
document.write(screen.pixelDepth);

# js bom 浏览器对象

# 一、 定时器

# setTimeout()

# setInterval()

# 二、 同步异步

# 三、 存储

# 1. cookie

# 2. storeage

# 四、 跳转

# 1. location 对象

# 2. history 历史对象

# 3. 获取 url 参数

# 五、 window 对象

# 六、 navigator 对象

# 七、 screen 屏幕对象