浏览器对象模型BOM--History、Navigator、Cookie等

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)

    //设置Cookie
    document.cookie = name + '=' + val + ';expires=' + now.toUTCString()
}
setCookie('name', '小琪', 60)

设置cookie有效期为当天24点并弹出欢迎登陆界面

来源

// 设置cookie在当天指定时间点过期并提示
function setCookie(name, value, Deadline, callback) {
    // 获取当前日期对象
    var curDate = new Date();
    // 获取当前日期对应的时间戳
    var curTime = curDate.getTime();
    // 获取指定时间的时间戳
    var endTime = convertTime(curDate, Deadline);
    // 计算出指定时间与当前时间的时间差
    var disTime = endTime - curTime;
    // 设置cookie过期时间
    document.setCookie = name + '=' + value + ';expires=' + disTime;
    // 在指定时间到达后执行回调
    setTimeout(callback, disTime);
}
setCookie('name', 'value', '24:00:00', function() {
    alert('cookie过期了');
});
// 获取指定时间的时间戳
function convertTime(nowDate, Deadline) {
    // 分割参数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){
    // 分割参数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);
        //清除自己设置的key
        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)
                }
            }
        }
    }
}