ArrayBuffer 对象，Blob 对象 ArrayBuffer 对象 ArrayBuffer 对象表示一段二进制数据，用来模拟内存里面的数据。通过这个对象，JavaScript 可以读写二进制数据。这个对象可以看作内存数据的表达。 这个对象是 ES6 才写入标准的，普通的网页编程用不到它，为了教程体系的完整，下面只提供一个简略的介绍，详细介绍请看《ES6 标准入门》里面的章节。 浏览器原生提供ArrayBuffer()构造函数，用来生成实例。它接受一个整数作为参数，表示这段二进制数据占用多少个字节。 1var buffer = new ArrayBuffer(8); 上面代码中，实例对象buffer占用8个字节。 ArrayBuffer 对象有实例属性byteLength，表示当前实例占用的内存长度（单位字节）。 12var buffer = new ArrayBuffer(8);buffer.byteLength // 8 ArrayBuffer 对象有实例方法slice()，用来复制一部分内存。它接受两个整数参数，分别表示复制的开始位置（从0开始）和结束位置（复制时不包括 ...

Location 对象，URL 对象，URLSearchParams 对象 URL 是互联网的基础设施之一。浏览器提供了一些原生对象，用来管理 URL。 Location 对象 Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。 属性 Location对象提供以下属性。 Location.href：整个 URL。 Location.protocol：当前 URL 的协议，包括冒号（:）。 Location.host：主机。如果端口不是协议默认的80和433，则还会包括冒号（:）和端口。 Location.hostname：主机名，不包括端口。 Location.port：端口号。 Location.pathname：URL 的路径部分，从根路径/开始。 Location.search：查询字符串部分，从问号?开始。 Location.hash：片段字符串部分，从#开始。 Location.username：域名前面的用户名。 Location.password： ...

History 对象 概述 window.history属性指向 History 对象，它表示当前窗口的浏览历史。 History 对象保存了当前窗口访问过的所有页面网址。下面代码表示当前窗口一共访问过3个网址。 1window.history.length // 3 由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。 12345// 后退到前一个网址history.back()// 等同于history.go(-1) 浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。 属性 History 对象主要有两个属性。 History.length：当前窗口访问过的网址数量（包括当前网页） History.state：History 堆栈最上层的状态值（详见下文） 123456// 当前窗口访问过多少个网页window.history.length // 1// History 对象的当前状态// 通常是 undefined，即未设置window.history.state // undefined 方法 History.back() ...

Storage 接口 概述 Storage 接口用于脚本在浏览器保存数据。两个对象部署了这个接口：window.sessionStorage和window.localStorage。 sessionStorage保存的数据用于浏览器的一次会话（session），当会话结束（通常是窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的其他方面都一致。 保存的数据都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。 这个接口很像 Cookie 的强化版，能够使用大得多的存储空间。目前，每个域名的存储上限视浏览器而定，Chrome 是 2.5MB，Firefox 和 Opera 是 5MB，IE 是 10MB。其中，Firefox 的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，Firefox 中，a.example.com和b.example.com共享 5MB 的存储空间。另外，与 Cookie 一样，它们也受同域限制。某 ...

CORS 通信 CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出XMLHttpRequest请求，从而克服了 AJAX 只能同源使用的限制。 简介 CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能。 整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与普通的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感知。因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨域通信。 两种请求 CORS 请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。 只要同时满足以下两大条件，就属于简单请求。 （1）请求方法是以下三种方法之一。 HEAD GET POST （2）HTTP 的头信息不超出以下几种字段。 Accept Accept-La ...

同源限制 浏览器安全的基石是“同源政策”（same-origin policy）。很多开发者都知道这一点，但了解得不全面。 概述 含义 1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。 最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页“同源”。所谓“同源”指的是“三个相同”。 协议相同 域名相同 端口相同（这点可以忽略，详见下文） 举例来说，[http://www.example.com/dir/page.html](http://www.example.com/dir/page.html)这个网址，协议是http://，域名是www.example.com，端口是80（默认端口可以省略），它的同源情况如下。 http://www.example.com/dir2/other.html：同源 http://example.com/dir/other.html：不同源（域名不同） http://v2.www.example.com/dir/other.html：不同源（域名不同） http://www. ...

XMLHttpRequest 对象 简介 浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。 1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。 具体来说，AJAX 包括以下几个步骤。 创建 XMLHttpRequest 实例 发出 HTTP 请求 接 ...

Cookie 概述 Cookie 是服务器保存在浏览器的一小段文本信息，一般大小不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息。 HTTP 协议不带有状态，有些请求需要区分状态，就通过 Cookie 附带字符串，让服务器返回不一样的回应。举例来说，用户登录以后，服务器往往会在网站上留下一个 Cookie，记录用户编号（比如id=1234），以后每次浏览器向服务器请求数据，就会带上这个字符串，服务器从而知道是谁在请求，应该回应什么内容。 Cookie 的目的就是区分用户，以及放置状态信息，它的使用场景主要如下。 对话（session）管理：保存登录状态、购物车等需要记录的信息。 个性化信息：保存用户的偏好，比如网页的字体大小、背景色等等。 追踪用户：记录和分析用户行为。 Cookie 不是一种理想的客户端存储机制。它的容量很小（4KB），缺乏数据操作接口，而且会影响性能。客户端存储建议使用 Web storage API 和 IndexedDB。只有那些每次请求都需要让服务器知道的信息，才应该放在 Cookie 里面。 每个 Cookie 都有以下几方面的元数据。 ...

Navigator 对象，Screen 对象。 window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本通过这个属性了解用户的环境信息。 Navigator 对象的属性 Navigator.userAgent navigator.userAgent属性返回浏览器的 User Agent 字符串，表示用户设备信息，包含了浏览器的厂商、版本、操作系统等信息。 下面是 Chrome 浏览器的userAgent。 12navigator.userAgent// "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.57 Safari/537.36" 通过userAgent属性识别浏览器，不是一个好办法。因为必须考虑所有的情况（不同的浏览器，不同的版本），非常麻烦，而且用户可以改变这个字符串。这个字符串的格式并无统一规定，也无法保证未来的适用性，各种上网设备层出不穷，难以穷尽。所以，现在一般不再通过它识别浏览器 ...