重拾JavaScript(十二)-BOM&浏览器存储

发表于 | 分类于 ，

BOM对象

BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型。

window对象

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

所有在全局作用域中声明的变量、函数、对象都会作为window的属性和方法。

例如：

1
2
3
4
5
6
7
8
var age = 24;
function sayAge(){
	alert(this.age)
}

alert(window.age) //24
sayAge() //24
window.sayAge() //24

常用的window对象

window.innerHeight&window.innerWidth

这两个属性返回网页的CSS布局占据的浏览器窗口的高度和宽度，单位为像素。

当用户放大网页的时候（比如将网页从100%的大小放大为200%），这两个属性会变小。

1
2
3
4
5
window.innerHeight
//636

window.innerWidth
//708

window.scrollTo()，window.scroll()，window.scrollBy()

window.scrollTo方法用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标。

1
window.scrollTo(0, 300); // 滚动条移动到300px处

window.scroll()方法是window.scrollTo()方法的别名。

window.scrollBy()方法用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

1
window.scrollBy(0, window.innerHeight)

上面代码用于将网页向下滚动一屏。

window.scrollX，window.scrollY

window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。

window.navigator

Window对象的navigator属性，指向一个包含浏览器相关信息的对象。

navigator.userAgent属性返回浏览器的User-Agent字符串，用来标示浏览器的种类。

Screen

Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息。window.screen属性指向这个对象。

  • Screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，否则这个值可以看作常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
  • Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）。
  • Screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）。因为部分空间可能不可用，比如系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
  • Screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）。
  • Screen.pixelDepth：整数，表示屏幕的色彩位数，比如24表示屏幕提供24位色彩。
  • Screen.colorDepth：Screen.pixelDepth的别名。严格地说，colorDepth 表示应用程序的颜色深度，pixelDepth 表示屏幕的颜色深度，绝大多数情况下，它们都是同一件事。
  • Screen.orientation：返回一个对象，表示屏幕的方向。该对象的type属性是一个字符串，表示屏幕的具体方向，landscape-primary表示横放，landscape-secondary表示颠倒的横放，portrait-primary表示竖放，portrait-secondary。

window.getComputedStyle

Window.getComputedStyle()方法返回一个对象，该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。

1
var style = window.getComputedStyle(element, [pseudoElt]);

  • element

    用于获取计算样式的[Element]。

  • pseudoElt 可选

    指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。

URL 的编码和解码

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

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

区别

encodeURI方法不会对下列字符编码：

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

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

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

所以encodeURIComponent比encodeURI编码的范围更大。

encodeURI()

encodeURI()方法用于转码整个 URL。它的参数是一个字符串，代表整个 URL。它会将元字符和语义字符之外的字符，都进行转义。

1
2
encodeURI('http://www.example.com/首页')
//"http://www.example.com/%E9%A6%96%E9%A1%B5"

encodeURIComponent()

encodeURIComponent()方法用于转码 URL 的组成部分，会转码除了语义字符之外的所有字符，即元字符也会被转码。所以，它不能用于转码整个 URL。它接受一个参数，就是 URL 的片段。

1
2
encodeURIComponent('首页')
//"%E9%A6%96%E9%A1%B5"

decodeURI()

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

1
2
decodeURI('http://www.example.com/%E9%A6%96%E9%A1%B5')
//"http://www.example.com/首页"

decodeURIComponent()

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

1
2
decodeURIComponent('%E9%A6%96%E9%A1%B5')
//"首页"

浏览器存储

定义

Cookie 是服务器保存在浏览器的一小段文本信息，每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息。

如何设置

cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，这是最常见的做法。

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

设置cookie时的参数

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

localStorage

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

属性和方法

Storage.setItem()

Storage.setItem()方法用于存入数据。它接受两个参数，第一个是键名，第二个是保存的数据。如果键名已经存在，该方法会更新已有的键值。该方法没有返回值。

1
2
window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');

注意，Storage.setItem()两个参数都是字符串。如果不是字符串，会自动转成字符串，再存入浏览器。

Storage.getItem()

Storage.getItem()方法用于读取数据。它只有一个参数，就是键名。如果键名不存在，该方法返回null。

1
2
window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

键名应该是一个字符串，否则会被自动转为字符串。

Storage.removeItem()

Storage.removeItem()方法用于清除某个键名对应的键值。它接受键名作为参数，如果键名不存在，该方法不会做任何事情。

1
2
sessionStorage.removeItem('key');
localStorage.removeItem('key');
Storage.clear()

Storage.clear()方法用于清除所有保存的数据。该方法的返回值是undefined。

1
2
window.sessionStorage.clear()
window.localStorage.clear()

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

session

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

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

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

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

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

  • 创建session后，会把关联的session_id 通过set-cookie 添加到http响应头部中。

  • 浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。

  • 当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。

    cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。当然有时候说到 session 也指服务器里创建的那个和用户身份关联的对象。