javascript BOM对象

BOM对象

BOM（Browser Object Model），javascript内置一些能够跟本机浏览器交互的对象，这些对象都隶属于顶层对象window

1. 获取浏览器的版本相关信息使用navigator
2. 获取浏览器窗口信息使用window
3. 获取本机屏幕相关信息适应screen
4. 获取导航信息，链接跳转使用location
5. 需要获取历史记录以及跳转使用history

window

window对象是js中的全局作用域，也表示浏览器窗口信息

window对象中包含的常见属性：

• innerHeight 获取浏览器内部高度

• innnerWidth 获取浏览器内部宽度

• outerHeight 获取浏览器外部高度

• outerWidth 获取浏览器外部宽度

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UJAl44KO-1598157607695)(D:\带班资料\2020\j2003\线下\part4-web前端\20200818\笔记\assets\1597712513131.png)]

window对象常见方法：

• alert：警告框
• confirm：确认框
• prompt：输入提示框
• open：打开新的窗口
• setInterval
• setTimeout

navigator

navigator对象表示浏览器的信息，最常用的属性包括：

• navigator.appName：浏览器名称；
• navigator.appVersion：浏览器版本；
• navigator.language：浏览器设置的语言；
• navigator.platform：操作系统类型；
• navigator.userAgent：浏览器设定的User-Agent字符串。

console.log('appName = ' + navigator.appName);
console.log('appVersion = ' + navigator.appVersion);
console.log('language = ' + navigator.language);
console.log('platform = ' + navigator.platform);
console.log('userAgent = ' + navigator.userAgent);

请注意，navigator的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。很多初学者为了针对不同浏览器编写不同的代码，喜欢用if判断浏览器版本，例如：

var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}

但这样既可能判断不准确，也很难维护代码。正确的方法是充分利用JavaScript对不存在属性返回undefined的特性，直接用短路运算符||计算：

var width = window.innerWidth || document.body.clientWidth;

screen

screen对象表示屏幕的信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

console.log('Screen size = ' + screen.width + ' x ' + screen.height);

location

location对象表示当前页面的URL信息。例如，一个完整的URL：

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

可以用location.href获取。要获得URL各个部分的值，可以这么写：

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

要加载一个新页面，可以调用location.assign()。如果要重新加载当前页面，调用location.reload()方法非常方便。

if (confirm('重新加载当前页' + location.href + '?')) {
    location.reload();
} else {
    location.assign('/'); // 设置一个新的URL地址
}

history

history对象保存了浏览器的历史记录，JavaScript可以调用history对象的back()或forward ()，相当于用户点击了浏览器的“后退”或“前进”按钮。

这个对象属于历史遗留对象，对于现代Web页面来说，由于大量使用AJAX和页面交互，简单粗暴地调用history.back()可能会让用户感到非常愤怒。

新手开始设计Web页面时喜欢在登录页登录成功时调用history.back()，试图回到登录前的页面。这是一种错误的方法。

localStorage

// cookie :存在安全风险
// 在html5中新增了浏览器本地存储的api，主要包含两个对象:
// + localStorage    本地存储
// + sessionStorage  基于一次会话存储
// 以上两个对象存储数据的方式类似java中的Map：以键值对的形式存储数据
console.log(localStorage)
//向本地存储中存储数据
localStorage.setItem('name','softeem');
localStorage.setItem('sex','男');
//获取存储的元素个数
console.log(localStorage.length);
//获取本地存储的数据
console.log(localStorage.getItem('name'));

document.getElementById('del').addEventListener('click',function(){
    //移除某一个元素
    localStorage.removeItem('sex');
})
document.getElementById('clearAll').addEventListener('click',function(){
    //清除本地存储
    localStorage.clear();
})

//获取指定索引对应的键名
console.log(localStorage.key(1))