BOM

浏览器对象模型（Browser Object Model）允许 JavaScript 与浏览器对话
window代表浏览器的窗口，全局变量是 window 对象的属性，全局函数是 window 对象的方法

window

方法	描述
window.open()	打开新窗口
window.close()	关闭当前窗口
window.moveTo()	移动当前窗口
window.resizeTo()	重新调整当前窗口

// 窗口尺寸
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

Screen

window.screen 对象包含用户屏幕的信息

属性	描述	属性	描述
screen.width	屏幕宽度	screen.height	屏幕高度
screen.availWidth	可用宽度	screen.availHeight	可用高度
screen.colorDepth	色深	screen.pixelDepth	像素深度

Location

window.location用于获取当前页面地址（URL）并把浏览器重定向到新页面

属性	描述	属性	描述
location.href	当前页面的 URL	location.hostname	当前页面的因特网主机的名称
location.pathname	返回当前页面的路径名	location.protocol	返回页面的 web 协议
location.port	返回当前页面的端口号	location.assign(url)	加载新文档，可以后退返回上一个页面

History

window.history 对象包含浏览器历史

属性	描述
history.back()	浏览器后退
history.forward()	浏览器前进

Navigator

window.navigator 对象包含有关访问者的信息

属性	描述	属性	描述
navigator.cookieEnabled	浏览器是否启用cookie	navigator.appName	浏览器的应用程序名称
navigator.appCodeName	浏览器的应用程序代码名称	navigator.product	浏览器引擎的产品名称
navigator.appVersion	浏览器的版本信息	navigator.userAgent	浏览器代理
navigator.platform	浏览器平台	navigator.language	浏览器语言
navigator.onLine	浏览器是否在线	navigator.javaEnabled()	Java 是否启用

提示

navigator.appName 值为Netscape是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称
navigator.appCodeName 值为Mozilla 是 Chrome、Firefox、IE、Safari 以及 Opera 的应用程序代码名称
navigator.product 大多数浏览器都将 Gecko 作为产品名称返回

localStorage

• 存储大小为5M
• localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据
• 存储永久有效，不主动清除就不会消失，存储于客户端浏览器上
• localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据

// 设置
localStorage.setItem(key, value)
// 获取
localStorage.getItem(key)
// 删除
localStorage.removeItem(key)
localStorage.clear()
// 设置到期时间
function set(key,value){
  var curtime = new Date().getTime();//获取当前时间
  localStorage.setItem(key,JSON.stringify({val:value,time:curtime}));//转换成json字符串序列
}
//exp是设置的过期时间 60 * 1000 1分钟到期
function get(key,exp){
  var val = localStorage.getItem(key);
  var dataobj = JSON.parse(val);
  //如果当前时间-减去存储的元素在创建时候设置的时间 > 过期时间
  if(new Date().getTime() - dataobj.time > exp){
    console.log("expires");//提示过期
  }else{
    console.log("val="+dataobj.val);
  }
}

sessionStorage

• 存储大小为5M
• sessionStorage除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下
• 浏览器关闭后则会被清除

// 获取
sessionStorage.getItem(key)
// 设置
sessionStorage.setItem(key,value)
// 清除
sessionStorage.clear()
sessionStorage.removeItem(key)

Cookie

• 存储量太小，只有4KB
• 存储于客户端浏览器上

属性	描述	属性	描述
Name	属性名	Value	属性值
Domain	主机地址	Path	指定url的路径
Expires	指定时间失效	Max-Age	多少秒之后失效
HttpOnly	cookie安全性	Secure	告诉浏览器这个cookie只能用https协议传输
SameSite	限制跨站请求时cookie的发送	Size	存储大小

• HttpOnly 只能是由服务端通过响应头种的set-cookie种在浏览器上

• Expires和Max-Age

  • 如果都不设置的话，则就是一个会话cookie，刷新和删除当前页都无法删除cookie,只有关闭浏览器才删除
  • 若expires和max-age都存在的时候，max-age的优先级高

  // 也可以是时间戳
  document.cookie = "userName=jack; expires=" + new Date('2023-02-01 11:55:00').toUTCString();
  document.cookie = "userName=jack; max-age=120";
  

• SameSite

  • None 不论是否跨站都发送cookie 必须设置Secure才有效

  • Strict 跨站不带cookie

  • Lax(默认值) 部分情况下携带cookie

    请求类型	示例	正常情况	Lax
    链接	<a href="..."></a>	发送Cookie	发送Cookie
    预加载	<link rel="prerender" href="..."/>	发送Cookie	发送Cookie
    GET表单	<form method="GET"></form>	发送Cookie	发送Cookie
    POST表单	<form method="POST"></form>	发送Cookie	不发送
    iframe	<iframe src="..."></iframe>	发送Cookie	不发送
    Ajax	$.get("...")	发送Cookie	不发送
    Image	<img src="..."></img>	发送Cookie	不发送

弹窗

// 警告框
window.alert('警告')
// 确认框
window.confirm('确定删除吗？')
// 输入框
window.prompt('请输入您的年龄','')