js - BOM

/**
 * BOM
 *  - BOM（Browser Object Model）： 浏览器对象模型
 *  - 通过提供的一系列对象操作浏览器
 */
//1. 浏览器窗口的尺寸
var w = window.innerWidth;//获取浏览器窗口宽度
var h = window.innerHeight;//后去浏览器的高度

//2. 浏览器的弹出层
window.alert("");//警告框
window.prompt();//输入框
window.confirm();//询问/选择框

//3. 开启和关闭标签页
window.open('地址');//开启标签页
window.close();//关闭标签页

//4. 浏览器的常用事件
window.onload = function(){}//资源加载完毕时触发的事件
window.onresize = function(){}//可视尺寸改变时触发的事件
window.onscroll = function(){}//滚动条位置改变时触发的事件

//5.1 浏览器的历史记录操作
//window.history.back()//回退页面
//window.history.forward()//前进页面
//window.history.go(0)//刷新页面
//5.2 浏览器的跳转操作（重要）
window.location()
location.href()
location.assign()

//6. 浏览器卷去的尺寸
//6.1 卷去的高度
var h = document.documentElement.scrollTop;//有 `DOCTYPE` 声明时
var h = document.body.scrollTop;//没有 `DOCTYPE` 声明时
//兼容写法
var h = document.documentElement.scrollTop || document.body.scrollTop;
//6.2 卷去的宽度
var w = document.documentElement.scrollLeft;//有 `DOCTYPE` 声明时
var w = document.body.scrollLeft;//没有 `DOCTYPE` 声明时
//兼容写法
var w = document.documentElement.scrollLeft || document.body.scrollLeft;

//7. 浏览器滚动到--设置浏览器滚动条的位置
window.scrollTo(left,top)//滚动条瞬间定位
window.scrollTo({
left:x ,
top: y,
behavior: "smooth"//滚动条滚动,smooth(平滑滚动),instant(瞬间滚动),默认值 auto
})


//（重要）localStorage / sessionStorage的基本使用
//1. 如何添加数据
//1.1 在本地存储中添加数据
window.localStorage.id = 1;
window.localStorage['name'] = '手机';
window.localStorage.setItem('price',3999);
//1.2 在会话存储中添加数据
window.sessionStorage.id = 2;
window.sessionStorage['name'] = 'PC';
window.sessionStorage.setItem('price', 4999);

//2. 如何访问指定的数据
console.log(window.localStorage.getItem('name'));
console.log(window.sessionStorage.getItem('name'));

//3. 如何访问所有的数据 {key:value}:{属性:属性值}
for(var i = 0,len = window.localStorage.length;i < len;i ++){
    //取出所有的key
    var key = window.localStorage.key(i);
    //取出所有的value
    var value = window.localStorage.getItem(key);
    console.log(key,value)
}

//4. 如何删除指定的数据
window.localStorage.removeItem('name');
window.localStorage.removeItem('name');

//5. 如何删除所有的数据
window.localStorage.clear();
window.sessionStorage.clear();