BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象
1. Window对象,是 JS 的最顶层对象,其他的 BOM 对象都是 window 对象的属性
属性或方法 描述 window.innerHeight 浏览器窗口的内高度(以像素计)除IE window.innerWidth 浏览器窗口的内宽度(以像素计)除IE document.documentElement.clientHeight/document.body.clientHeight 浏览器窗口的内高度(以像素计)IE document.documentElement.clientWidth/document.body.clientWidth 浏览器窗口的内宽度(以像素计)IE window.open() 打开新窗口 window.close() 关闭当前窗口 window.moveTo() 移动当前窗口 window.resizeTo() 重新调整当前窗口
2. Screen对象,客户端屏幕信息
属性或方法 描述 screen.width 返回以像素计的访问者屏幕宽度 screen.height 返回以像素计的访问者屏幕的高度 screen.availWidth 返回访问者屏幕的宽度,以像素计,减去诸如窗口工具条之类的界面特征 screen.availHeight 返回访问者屏幕的高度,以像素计,减去诸如窗口工具条之类的界面特征 screen.colorDepth 返回用于显示一种颜色的比特数 screen.pixelDepth 返回屏幕的像素深度
3. Location对象,浏览器当前URL信息
属性或方法 描述 location.href 返回当前页面的 href (URL) location.hostname 返回 web 主机的域名 .location.pathname 返回当前页面的路径或文件名 location.protocol 返回使用的 web 协议(http: 或 https:) location.port 属性返回(当前页面的)互联网主机端口的编号 location.assign() 加载新文档
4. History对象,浏览器访问历史信息
属性或方法 描述 history.back() 等同于在浏览器点击后退按钮 history.forward() 等同于在浏览器中点击前进按钮 history.go() 实现向前 后退的功能(正数前进,负数后退,0刷新页面)
5. Navigator对象,浏览器本身信息
属性或方法 描述 navigator.appCodeName 浏览器代号 navigator.appName 浏览器名称 navigator.appVersion 浏览器版本 navigator.cookieEnabled 启用Cookies navigator.platform 硬件平台 navigator.language 用户代理语言
注意: 来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为: navigator 数据可被浏览器使用者更改 一些浏览器对测试站点会识别错误 浏览器无法报告晚于浏览器发布的新操作系统
6. Cookie
什么是 cookie? Cookie 是在您的计算机上存储在小的文本文件中的数据。 当 web 服务器向浏览器发送网页后,连接被关闭,服务器会忘记用户的一切。 Cookie 是为了解决“如何记住用户信息”而发明的:
当用户访问网页时,他的名字可以存储在 cookie 中。 下次用户访问该页面时,cookie 会“记住”他的名字。 相关内容
属性 描述 name cookie的名字(键) value cookie存放的值 expires 指cookie过期的时间(该时间为世界时间 UTC时间)也称为格林威治时间 max-age 指cookie最大的存活有效期(单位:秒) domain 指的是cookie当前的域 path 指cookie当前的路径 size 指cookie存放的大小 secure 指cooke的安全属性
设置cookie失效时间为XX分钟
function setCookie ( name, val, min ) {
var now = new Date ( ) ;
now. setMinutes ( now. getMinutes ( ) + min)
document. cookie = name + '=' + val + ';expires=' + now. toUTCString ( )
}
setCookie ( 'name' , '小琪' , 60 )
设置cookie有效期为当天24点并弹出欢迎登陆界面
来源
function setCookie ( name, value, Deadline, callback ) {
var curDate = new Date ( ) ;
var curTime = curDate. getTime ( ) ;
var endTime = convertTime ( curDate, Deadline) ;
var disTime = endTime - curTime;
document. setCookie = name + '=' + value + ';expires=' + disTime;
setTimeout ( callback, disTime) ;
}
setCookie ( 'name' , 'value' , '24:00:00' , function ( ) {
alert ( 'cookie过期了' ) ;
} ) ;
function convertTime ( nowDate, Deadline ) {
var _dateArr = Deadline. split ( ':' ) ;
var hours = parseInt ( _dateArr[ 0 ] ) ;
var minutes = parseInt ( _dateArr[ 1 ] ) ;
var seconds = parseInt ( _dateArr[ 2 ] ) ;
nowDate. setHours ( hours) ;
nowDate. setMinutes ( minutes) ;
nowDate. setSeconds ( seconds) ;
var result = Date. parse ( nowDate) ;
return result;
}
设置localStorage当天24点过期
来源
function convertTime ( nowDate, deadLine ) {
var _dateArr = deadLine. split ( ':' ) ;
var hours = parseInt ( _dateArr[ 0 ] ) ;
var minutes = parseInt ( _dateArr[ 1 ] ) ;
var seconds = parseInt ( _dateArr[ 2 ] ) ;
nowDate. setHours ( hours) ;
nowDate. setMinutes ( minutes) ;
nowDate. setSeconds ( seconds) ;
return Date. parse ( nowDate) ;
}
var curDate = new Date ( ) ;
var curTime = curDate. getTime ( ) ;
var endTime = convertTime ( curDate, '24:00:00' ) ;
var disTime = endTime - curTime;
function store ( key, value, expire ) {
let obj = {
time : new Date ( ) . getTime ( ) ,
value : value,
expire : expire,
} ;
let objStr = JSON . stringify ( obj) ;
localStorage. setItem ( key, objStr) ;
}
store ( 'local_name' , 'value' , disTime) ;
var len = localStorage. length;
for ( var i = 0 ; i < len; i++ ) {
var getKey = localStorage. key ( i) ;
if ( localStorage. getItem ( getKey) ) {
var name = localStorage. getItem ( getKey) ;
if ( name. indexOf ( 'local' ) >= 0 ) {
var nameObj = JSON . parse ( name) ;
if ( nameObj. time && nameObj. expire) {
if ( new Date ( ) . getTime ( ) - nameObj. time >= nameObj. expire) {
localStorage. removeItem ( getKey)
}
}
}
}
}