BOM|BOM 对象 & localStorage & cookie & session BOM对象&localStorage&cookie&session

BOM对象

几个其他概念

ESMAscript
ES3
ES5
ES6

学的是语法，es指的是es5，es6，es3
不光可以放到浏览器里面运行，也可以放到单片机，node.js上运行
和我们的浏览器不相关

DOM 文档对象模型

js换了个环境，放到浏览器上，和数组产生了一些关联，使用js操作浏览器之间的一些元素，dom

BOM
指浏览器对象模型用于描述这种对象与对象之间层间，指打开页面的元素

浏览器的页面
浏览器的宽高
和我们的window有关

window

BOM的核心是window对象
全局变量都是window的属性

window对象属性 window.innerHegiht window.innerWIth
返回浏览器内部的宽高
scrollX、scrollY
【BOM|BOM 对象 & localStorage & cookie & session】我们也可以通过window.scrollto移动滚动条
window.scroll(0,200)
window.frames
navgitor
存储浏览器的相关信息

useragent 判断浏览器的类型看是什么设备
online 表示是否在线

screen
表示当前的屏幕
window.getComputedStyle
获取当前元素所有最终使用的css属性值
window.getComputedStyle('元素'，'伪类')
URL的编码/解码方式

decodeURL()
decodeUELComponent()
encodeURL()
encodeURLComponent()

encodeURL不会对下列字符编码

ASCII字母
数字

浏览器不可以分辨特殊符号，这时使用encodeURLCompnent对url进行编码

alert() prompt() confirm()
localStorage & cookie & session cookie

在当前域名下存的一点数据，用来记录某些当页面关闭或者刷新猴仍然需要记录的信息
可以使用js在浏览器直接设置，或者再http上直接种下cookie
任何请求都会带上cookie
设置cookie的参数，path：表示 cookie 影响到的路径，匹配该路径才发送这个 cookie。

expires 和 maxAge：告诉浏览器 cookie 时候过期，maxAge 是 cookie 多久后过期的相对时间。不设置这两个选项时会产生 session cookie，session cookie 是 transient 的，当用户关闭浏览器时，就被清除。一般用来保存 session 的 session_id。
secure：当 secure 值为 true 时，cookie 在 HTTP 中是无效，在 HTTPS 中才有效
httpOnly：浏览器不允许脚本操作 document.cookie 去更改 cookie。一般情况下都应该设置这个为 true，这样可以避免被 xss 攻击拿到cookie。
作用

记录用户名
可以去修改documnet.cookie
把购物车的信息存储在cookie上

很多网站的静态资源使用CDN地址而是使用当前网站域名，从cookie的角度说说这对性能有何影响?
很多静态资源都设置成baidu.com可以换个域名，可以把js换一个域名，cookie只对一个域名生效，而对另一个域名不生效
section 登陆淘宝后，刷新页面后，可以分辨出请求用户的刚才登陆的用户呢？这里就需要使用session的保存状态了

创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
当下次刷新页面时，发送的请求会带上这条cookie，服务端在接收到后根据这个session_id来识别用户。

Local Storage

只能存的是字符串
可以存很多东西，可以存5兆或10兆的东西
没有控制的地方，只能存进去的东西

localStorage['name']

需要将对象转化为字符产的时候才存放进去

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

window.onload
当一个资源及其依赖资源已完成加载时，将触发load事件。
document.onDOMContentLoaded
当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载。

如何获取图片真实的宽高？
等待imgeonload完所有的有关参数之后，取宽高

img.onload = function(){ alert(img.width,img.height) }

如何获取元素的真实宽高？
window.getComputedStyle(document.getElementById("id")).height;
window.getComputedStyle是一个可以获取当前元素使用的css属性值，返回一个css样式声明

var style = window.getComputedStyle("元素", "伪类"); 例如： var dom = document.getElementById("test"), var style = window.getComputedStyle(dom , ":after");

URL 如何编码解码？为什么要编码？

URL 编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。
浏览器不可以分辨特殊符号，这时使用encodeURLCompnent对url进行编码

补全如下函数，判断用户的浏览器类型。

function isAndroid(){ return /Android/.test(navigiter.userAgent) } function isIphone(){ return /iPhone/.test(navigiter.userAgent) } function isIpad(){ return /iPad/.test(navigiter.userAgent) } function isIOS(){ return /(ipad)|(iphone)|(mac)/i.test(navigitor.userAgent) }

cookie & session &localStorage 分别是什么？

cookie是存储在浏览器的一小段数据，用来记录某些页面关闭或者刷新之后仍然需要储存的数据
session保存状态，用户输入用户名或者密码到服务器的时候，服务器验证后会创建一个session用于记录用户的相关信息，这个session可以保存在服务器内存，也可以保存在数据库当中
localStorage localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。

该JSON.parse()方法解析JSON字符串，构造字符串描述的JavaScript值或对象。可以提供可选的reviver函数，以在返回结果对象之前对其进行转换。

var Storage = (function(){ return { set: function(key,value,expiredSeconds){ localStorage[key] = JSON.stringify({ value: value, expired: expiredSeconds===undefined?undefined:Date.now()+1000*expireSeconds }) }, get: function(key){ if(localStorage[key] === undefined){ return } var o = JSON.parse(LocalStorage[key]) if(o.expired === undefined || Date.now() < o.expired){ return o.value }else{ delete localStorage[key] } } } })()