hello，JS：11浏览器基础：BOM对象和浏览器储存

发表于 | 更新于: | 分类于 ， | 阅读次数:
字数统计: 2,867 | 阅读时长 ≈ 11

（一）BOM对象

一、BOM是什么

dom，指的是页面上的元素，而bom是针对浏览器的一种对象模型，用于描述这种对象与对象之间层次关系的模型。浏览器本身的特性（如当前位置、浏览器宽高、以及系统环境等），而这些与当前的web页面并无关系，而是与当前的window（整个浏览器的窗口，不只是页面，不要误解）相关。

二、BOM包含什么？

BOM的核心是window对象。表示浏览器的一个实例。在浏览器中，即是javascript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象，这就意味着在网页中定义的任意变量、函数、对象都是以window作为Global对象。

注：所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法，如全局变量都是window对象的一个属性如在全局作用域下，在控制台下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var a = 1
window.a 
-->1
/* 或 */
window.document
-->#document
/* 或声明一个函数如 */
function printName(){
    console.log(age);
}
window.printName
-->ƒ printName(){
    console.log(age);
}

三、常用的window对象

1、window.innerHeight和 window.innerWidth

返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。
即当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小

（1）window.innerHeight

1
2
3
//我随意调了浏览器的大小后的高度
window.innerHeight
-->568

（2）window.innerWidth

1
2
window.innerWidth
-->320

2、window.scrollTo、window.scrollBy、window.scroll

1
2
window.scrollTo(0, 0)   //页面回到顶部
window.scrollTo(0, 300) // 滚动条移动到300px处

两个参数分别是水平、垂直方向偏移

scrollBy可以相对当前位置移动滚动条，而不是移动到绝对位置

1
scrollBy(0, 100); // 滚动条下移100px

移动端滚动：
window.scrollTo(0,1);
即手机浏览器上的搜索栏则会本隐藏掉

3、navigator

navigator是一个存储浏览器相关信息的对象。作为属性，它的值也是一个对象。打开控制台所示，有部分重要参数了解一下：

1
2
3
4
//表示的是当前用户代理是什么，即使用什么设备用浏览器
userAgent:"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36"

4、window.getComputedStyle

1
var style = window.getComputedStyle("元素", "伪类");

获取当前元素所有最终使用的样式的属性

5、scrollX和scrollY

这两个值随着滚动位置变化而变化

  • scrollX：滚动条横向偏移
  • scrollY：滚动条纵向偏移

6、window.frames

window.frames返回一个类似数组的对象，成员为页面内的所有框架，包括frame元素和iframe元素。
如何在当前页面下定位到a.html里面的dom元素？如图：

此时可以使用window.frames去获取所有iframe，定位到含有a.html的这个对象，再从里面获取我们所需要的dom元素（注意同源策略问题出现）

需要注意的是，window.frames的每个成员对应的是框架内的窗口（即框架的window对象），获取每个框架的DOM树，需要使用window.frames[0].document。

7、screen

并不是浏览器的屏幕，指的是当前设备的屏幕

8、URL的编码/解码方法

可以先看看若愚老师写的这篇文章，对于编码和乱码会有一个初步的认识：若愚：聊一聊编码与乱码

JavaScript提供四个URL的编码/解码方法。

  • decodeURI()
  • decodeURIComponent()
  • encodeURI()
  • encodeURIComponent()

如当我们在某网页的控制台里输入：

1
2
location.href
-->"http://book.jirengu.com/fe/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/Javascript/bom.html"

url中包含的中文字符，自动转码，即encodeURI()转换成unidode码
注： encodeURI方法不会对下列字符编码

1
2
3
1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'

encodeURIComponent方法不会对下列字符编码

1
2
3
1. ASCII字母
2. 数字
3. ~!*()'

如何用？

实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F而encodeURI却不会。
如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。

1
encodeURI("http://blog.jirengu.com/?cat=11&a=饥人谷"); //"http://blog.jirengu.com/?cat=11&a=%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7";

其中，汉字被编码。但是如果你用了encodeURIComponent，那么结果变为

1
"http%3A%2F%2Fblog.jirengu.com%2F%3Fcat%3D11%26a%3D%25E9%25A5%25A5%25E4%25BA%25BA%25E8%25B0%25B7"

escape,encodeURI,encodeURIComponent有什么区别?

了解一下：个人倾向于这个回答：escape,encodeURI,encodeURIComponent有什么区别?

9、alert()，prompt()，confirm()

三者都是浏览器用来与用户互动的方法。它们会弹出不同的对话框，要求用户做出回应。

  • alert()
    1
    alert(1)

如图：

  • prompt()
    1
    2
    3
    4
    var a = prompt('enter something') //跳出弹出框
    //undefined
    a
    //"100"

如图：

  • confirm()
    1
    2
    3
    4
    var isOk = confirm('r u ok?')//弹出确定/取消键
    // undefined
    isOk
    // true

confirm方法返回一个布尔值，如果用户点击“确定”，则返回true；如果用户点击“取消”，则返回false。

（二）浏览器存储

cookie & session & localStorage

一、cookie

1、cookie 是什么：

储存在用户本地终端上的数据，也叫浏览器缓存

2、如何找到cookie：

打开页面控制台——Application——Storeage——localstorge、cookie（对象）
cookie用于把一些记录信息存储在当前的页面下。存储在cookie当前域名下的一小段数据，存储空间很小，不超过4kb；对应参数Name、Value、Domain、Path、Expires（生效时间）、Size等，如图：

设置cookie时的参数：

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

3、cookie 怎么产生：

Cookie是由Web服务器保存在用户浏览器 (客户端 )上的小文本文件,它可 以包含有关用户的信息。由网络服务器发送出来存储在网络浏览器上，下次它回到该网络服务器时，还可以在该浏览器读此信息。

注： 每次向服务端发送请求，Cookies都会被带到HTTP中，即网络请求 Request headers中都会带上cookie。如果cookie太多太大，造成负载太大，对传输效率会有影响。

4、常用做法：

cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用HTTP协议规定的set-cookie来让浏览器种下cookie，这是最常见的做法。（打开一个网站，清除全部cookie，然后刷新页面，在network的Responseheaders试试找一找set-cookie吧）。比如百度搜索，输入网址——向服务器发请求——服务器给出响应，打开控制台——Network——Headers，看见响应头、尾。响应头对应有set-cookie该请求，浏览器则把该字段种进cookie里面。

查看cookie： cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。在控制台用「document.cookie」查看你当前正在浏览的网站的cookie。

5、Cookies可以加失效日期，失效日期过了，就会自动删除Cookies，一般来说可以用Cookies记录用户名，不能记录密码，否则不安全。

6、可以在浏览器中存储东西，和LocalStorage作用类似；可以控制cookie的生命期，Cookie数量和长度受限制

二、localstorge

1、localStorage HTML5本地存储web　storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。

2、不参与网络传输。

3、一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。

localstorge：对应参数key、value，存储量大

  • 如何存储数据，如控制台测试效果：
  • 假设讲一个数组存储进localstorge['name'],它会自动将数组转换成字符串，出现的name的数据则为[object object],即数据已经丢失,如图：
  • 想要把一个对象存储进localstorge，将对象转换成字符串（二者可用json互转）存储进去，如图：

4、SessionStorage VS LocalStorage

SessionStorage和LocalStorage接口类似，但是SessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。

三、session

1、Session是一种特殊的Cookies，用于识别用户。

cookie 虽然很方便，但是使用 cookie 有一个很大的弊端，cookie 中的所有数据在客户端就可以被修改，数据非常容易被伪造，那么一些重要的数据就不能存放在cookie中了，而且如果cookie中数据字段太多会影响传输效率。为了解决这些问题，就产生了session，session中的数据是保留在服务器端的。

当一个用户打开淘宝登录后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？这里就使用了session保存状态。

用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session，用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。

2、session 的运作通过一个session_id来进行。

session_id通常是存放在客户端的cookie中，比如在express中，默认是connect.sid这个字段，当请求到来时，服务端检查cookie中保存的session_id并通过这个session_id与服务器端的sessiondata关联起来，进行数据的保存和修改。

即当你浏览一个网页时，服务端随机产生一个1024比特长的字符串，然后存在你 cookie 中的connect.sid字段中。当你下次访问时，cookie会带有这个字符串，然后浏览器就知道你是上次访问过的某某某，然后从服务器的存储中取出上次记录在你身上的数据。由于字符串是随机产生的，而且位数足够多，所以也不担心有人能够伪造。

  • 创建session后，会把关联的session_id通过setCookie添加到http响应头部中。
  • 浏览器在加载页面时发现响应头部有set-cookie字段，就把这个cookie 种到浏览器指定域名下。
  • 当下次刷新页面时，发送的请求会带上这条cookie，服务端在接收到后根据这个session_id来识别用户。
  • cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session在实现的过程中需要使用cookie。当然有时候说到 session 也指服务器里创建的那个和用户身份关联的对象。
-------------本文结束感谢您的阅读-------------