BOM与window

BOM

• BOM是browser object model的缩写，简称浏览器对象模型。
• 浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
• Window是BOM中的核心对象。

1. window.onload 和 document.onDOMContentLoaded 有什么区别？

• 当使用window.onload时，页面上所有的DOM、样式表、脚本、图片、flash都已经加载完成。
• 当使用document.onDOMContentLoaded时，仅当DOM加载完成不包括样式表、图片、flash。

2. 如何获取图片真实的宽高？

document.querySelector("img").onload = dunction() {
    console.log(this.width);
    console.log(this.height);

3. 如何获取元素的真实宽高？

//假如我要获取名为body元素的宽高
console.log(body.offsetHeight)
console.log(body.offsetWidth)

4. URL 如何编码解码？

JavaScript中提供了四个URL编码方法：

• encodeURI()
  用于转码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行转义。不会对ASCII字母、数字、~!@#$&*()=:/,;?+'
  字符编码 。

encodeURI('http://www.example.com/q=春节')
// "http://www.example.com/q=%E6%98%A5%E8%8A%82"

• encodeURIComponent()
  用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。它接受一个参数，就是 URL 的片段。不会对ASCII字母、数字、~!*()' 字符编码。

注意：encodeURIComponent()会连 URL 元字符一起转义，所以如果转码整个 URL 就会出错。

encodeURIComponent('春节')
// "%E6%98%A5%E8%8A%82"
encodeURIComponent('http://www.example.com/q=春节')
//"http%3A%2F%2Fwww.example.com%2Fq%3D%E6%98%A5%E8%8A%82"

• decodeURI()
  用于整个 URL 的解码。它是encodeURI()方法的逆运算。它接受一个参数，就是转码后的 URL。

decodeURI('http://www.example.com/q=%E6%98%A5%E8%8A%82')
// "http://www.example.com/q=春节"

• decodeURIComponent()
  用于URL 片段的解码。它是encodeURIComponent()方法的逆运算。它接受一个参数，就是转码后的 URL 片段。

decodeURIComponent('%E6%98%A5%E8%8A%82')
// "春节"

5.为什么要编码？

• URL就是网址，只要上网，就一定会用到。
• 只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*'(),”[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。
• 如果URL中有汉字，就会导致乱码。
• URL参数字符串中如果包含”&”或者”%”势必会造成服务器解析错误。
• 不同情况浏览器，网页，编码的处理方式不同。也会导致编码混乱不堪。

怎么解决上述问题？

使用Javascript先对URL编码，然后再向服务器提交，不要给浏览器插手的机会。因为Javascript的输出总是一致的，所以就保证了服务器得到的数据是格式统一的。

6. cookie & session &localStorage 分别是什么？

cookie

• 会跟随请求被发送到服务器上
• 是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息
• 一般浏览器存储cookie 最大容量为4k，所以大量数据不要存到cookie。
• 有个数限制，不同浏览器下，一个域名下cookie的个数有限，并且限制数量可能不一样

session

• 当一个用户打开一个页面登录后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢 这里就使用了session保存状态。用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。
• 创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
• 浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
• 当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。
• cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。 二者不是同一维度的东西。

localStorage

• localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
• 不参与网络传输。
• 一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。
• 总体数量无限制