Window 对象
Window 对象表示浏览器中打开的窗口。这么一说大家肯定还是和我一样一脸懵逼，浏览器中打开的窗口是新的标签吗？就有下文的白话文。
JavaScript 的所有对象都存在于一个运行环境之中，这个运行环境本身也是对象，称为“ 顶层对象 ”。这就是说，JavaScript 的所有对象，都是“ 顶层对象 ”的下属。不同的运行环境有不同的“ 顶层对象 ”，在浏览器环境中，这个顶层对象就是 window 对象。
所有浏览器环境的全局变量，都是window对象的属性。
var a = 1; window.a // 1
可以简单理解成，window 就是指当前的浏览器窗口。
只要指定某个 window 或帧框（frame）的名字，就可以从这个全局对象读取该窗口的全局变量。比如，某个文档存在一个全局变量 x，就可以从 iframe 的 parent.x 读取该全局变量。
属性
| 属性 | 说明 |
| document | 对话框中显示的当前的文档 |
| frames | 表示当前对话框中所有frame对象的集合 |
| location | 指定当前文档的URI |
| name | 对话框的名字 |
| status | 状态栏中的当前信息 |
| defaultstatus | 状态栏的默认信息 |
| top | 表示最顶层的浏览器对话框 |
| parent | 表示包含当前对话框的父对话框 |
| opener | 表示打开当前对话框的父对话框 |
| closed | 表示当前对话框是否关闭的逻辑值 |
| length | 设置或返回窗口中的框架数量 |
| … | … |
方法
| 方法 | 说明 |
| alert() | 显示带有一段消息和一个确认按钮的警告框 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框 |
| prompt() | 显示可提示用户输入的对话框 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
| close() | 关闭浏览器窗口 |
| focus() | 把键盘焦点给予一个窗口 |
| blur() | 将被引用的的对话框放在所有打开对话框的后面 |
| scrollTo(x，y) | 把对话框滚动到指定的坐标 |
| scrollBy(x，y) | 按照指定的位移量滚动对话框 |
| setTimeout(timer) | 在指定毫秒后，对传递的表达式求值 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout |
| setInterval(interval) | 指定周期性执行代码 |
| clearInterval() | 取消由 setInterval() 设置的 timeout |
| moveTo(x，y) | 将对话框移动到指定坐标处 |
| moveBy(offsetx，offsety) | 将对话框移动到指定的位移量处 |
| resizeTo(x，y) | 设置对话框大小 |
| … | … |
使用
// 使用window window // 获取整个页面 window.document // 打开一个新窗口 myW=window.open('http://c69p.com'); // 经过三秒后关闭打开的窗口 window.setTimeout(function(){ myW.close(); }, 3000);
Navigator 对象
Navigator 对象包含有关浏览器的信息。
属性
| 属性 | 说明 |
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
使用
// 显示浏览器 console.log(navigator) // output: Navigator {vendorSub: '', productSub: '20030107', vendor: 'Google Inc.', maxTouchPoints: 0, scheduling: Scheduling, …}
Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。
属性
| 属性 | 说明 |
| availHeight | 返回屏幕的高度（不包括Windows任务栏） |
| availWidth | 返回屏幕的宽度（不包括Windows任务栏） |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
| height | 返回屏幕的总高度 |
| pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） |
| width | 返回屏幕的总宽度 |
使用
// 显示客户端相关信息 console.log(screen) // output: Screen {availWidth: 1536, availHeight: 824, width: 1536, height: 864, colorDepth: 24, …}
History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history.xxx 属性对其进行访问。
属性
| 属性 | 说明 |
| length | 返回历史列表中的网址数 |
方法
| 方法 | 说明 |
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
使用
// 使用 history // or window.history window.history // output: History {length: 5, scrollRestoration: 'auto', state: null} // 获取长度属性 history.length // output: 3 // 后退一页 history.go(-1)
Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。
属性
| 属性 | 描述 |
| hash | 返回一个URL的锚部分 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| href | 返回完整的URL |
| pathname | 返回的URL路径名 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
方法
| 方法 | 说明 |
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
使用
// 使用 location // or window.location window.location // output: Location {ancestorOrigins: DOMStringList, href: 'http://c69p.com.test/test#aa', origin: 'http://c69p.com.test', protocol: 'http:', host: 'c69p.com.test', …} // 获取 URL 锚部分 location.hash // output: '#aa'
JavaScript 存储对象
Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。
localStorage用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
存储对象属性
| 属性 | 描述 |
| length | 返回存储对象中包含多少条数据 |
存储对象方法
| 方法 | 描述 |
| key(n) | 返回存储对象中第 n 个键的名称 |
| getItem(keyname) | 返回指定键的值 |
| setItem(keyname, value) | 添加键和值，如果对应的值存在，则更新该键对应的值 |
| removeItem(keyname) | 移除键 |
| clear() | 清除存储对象中所有的键 |
Web 存储 API
| 属性 | 描述 |
| window.localStorage | 在浏览器中存储 key/value 对。没有过期时间 |
| window.sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据 |
使用
// 使用 window.localStorage or localStorage window.localStorage localStorage // 设置 name 为 chendasheng localStorage是永久缓存需要手动删除 localStorage.setItem('name','chendasheng') localStorage.getItem('name') // output: 'chendasheng' // 使用 window.sessionStorage or sessionStorage window.sessionStorage sessionStorage // 设置 name 为 chendasheng sessionStorage 是临时缓存关闭浏览器或关闭当前窗口将会清理 sessionStorage.setItem('name','chendasheng') sessionStorage.getItem('name') // output: 'chendasheng'
参考 & 引用
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2cx8npfhvrk0w
