Window 对象

Window 对象表示浏览器中打开的窗口。这么一说大家肯定还是和我一样一脸懵逼，浏览器中打开的窗口是新的标签吗？就有下文的白话文。

JavaScript 的所有对象都存在于一个运行环境之中，这个运行环境本身也是对象，称为“ 顶层对象 ”。这就是说，JavaScript 的所有对象，都是“ 顶层对象 ”的下属。不同的运行环境有不同的“ 顶层对象 ”，在浏览器环境中，这个顶层对象就是 window 对象。

所有浏览器环境的全局变量，都是window对象的属性。

var a = 1;
window.a // 1

可以简单理解成，window 就是指当前的浏览器窗口。

只要指定某个 window 或帧框（frame）的名字，就可以从这个全局对象读取该窗口的全局变量。比如，某个文档存在一个全局变量 x，就可以从 iframe 的 parent.x 读取该全局变量。

属性

方法

使用

// 使用window
window
// 获取整个页面
window.document

// 打开一个新窗口
myW=window.open('http://c69p.com');

// 经过三秒后关闭打开的窗口
window.setTimeout(function(){
    myW.close();
}, 3000);

Navigator 对象

Navigator 对象包含有关浏览器的信息。

属性

使用

// 显示浏览器
console.log(navigator)
// output: Navigator {vendorSub: '', productSub: '20030107', vendor: 'Google Inc.', maxTouchPoints: 0, scheduling: Scheduling, …}

Screen 对象

Screen 对象包含有关客户端显示屏幕的信息。

属性

使用

// 显示客户端相关信息
console.log(screen)
// output: Screen {availWidth: 1536, availHeight: 824, width: 1536, height: 864, colorDepth: 24, …}

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history.xxx 属性对其进行访问。

属性

方法

使用

// 使用
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 格式的相关属性对其进行访问。

属性

方法

使用

// 使用
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 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

存储对象属性

存储对象方法

Web 存储 API

使用

// 使用 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'

参考 & 引用

JavaScript 教程 | 菜鸟教程

我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2cx8npfhvrk0w