Bom对象&cookie & session &localStorage

一、window. 和 document.onDOMContentLoaded 有什么区别？

• 当window.事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了。

• 当document.onDOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash。
  两者触发时机不同，window.触发的更晚。

  • 两事件的作用都是：当我们给一些元素绑定函数时，会出现绑定处理函数运行完了，但是元素还没有加载的情况。而window.事件和document.onDOMContentLoaded事件就是为了避免这种情况。

  • 保证在元素加载完成之后再处理绑定函数。
    但document.onDOMContentLoaded加载机制更加合理。因为大多数客户可以允许图片，flash等的加载。

二、如何获取图片真实的宽高？

function $(selector) {  return document.querySelector(selector);
}
$('img'). = function (){  console.log(this.width)  console.log(this.height)
}

三、如何获取元素的真实宽高？

function $(selector) {  return document.querySelector(selector);
}console.log(window.getComputedStyle($('.box')).width);console.log(window.getComputedStyle($('.box')).height);

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

• URL 编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

  • 首先需要把该字符的 ASCII 的值表示为两个16进制的数字，然后在其前面放置转义字符("%")，置入 URL 中的相应位置。(对于非 ASCII 字符, 需要转换为 UTF-8 字节序, 然后每个字节按照上述方式表示）

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

1. decodeURI()

2. decodeURIComponent()

3. encodeURI()

4. encodeURIComponent()

• URL只能使用ASCII字符集通过因特网进行发送，也就是说URL中只能包含英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号，所以URL中包含中文的部分必须编码之后使用。

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

function isAndroid(){    return /Android/.test(navigator.userAgent)
}function isIphone(){    return /Iphone/.test(navigator.userAgent)
}function isIpad(){    return /Ipad/.test(navigator.userAgent)
}function isIOS(){    return /(Iphone)|(Ipad)/.test(navigator.userAgent)
}

六、cookie & session &localStorage 分别是什么？

cookie

1. Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。用来记录某些当页面关闭或者刷新后仍然需要记录的信息。

2. 浏览器需要保存这段数据，不得轻易删除。cookie可以使用 js 在浏览器直接设置（用于记录不敏感信息，如用户名）, 也可以在服务端通使用 HTTP 协议规定的 set-cookie 来让浏览器种下cookie，这是最常见的做法

3. 此后每次浏览器访问该服务器，都必须带上这段数据。所以如果 cookie 太多太大对传输效率会有影响。

session

• session是一次浏览器和服务器的交互的会话，session是存在服务器的，用于区分会话和不同用户的访问。

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

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

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

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

cookie & session 的不同：

• cookie是存在浏览器的，根据请求的路径自动发送的，服务器端可以对其进行处理

• session是存在服务器的，用于区分会话和不同用户的访问
  cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。

localStorage

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

2. 不参与网络传输。

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

六、使用 localStorage封装一个 Storage 对象，达到如下效果：

Storage.set('name', '谷') 
Storage.set('age', 2, 30) ;  //设置 name 字段存储的值为'谷'Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

Storage.get('name')   // ‘谷’Storage.get('age')     //  如果不超过30秒，返回数字类型的2；如果超过30秒，返回 undefined，并且 localStorage 里清除 age 字段Storage.get('teachers')  //如果不超过60秒，返回数组； 如果超过60秒，返回undefined

var Storage = (function(){    return {        set: function(key,value,expireSeconds){
            localStorage[key] = JSON.stringify({                value: value,                expired: expireSeconds===undefined?undefined:Data.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 locationStorage[key]
            }
        }
    }
})

作者：徐金俊
链接：https://www.jianshu.com/p/c06049d13cf6