BOM对象、cookie、session

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

window.onload:页面所有资源加载完成
document.onDOMContentLoaded ：DOM结构解析完成

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

先将图片加载完毕后再获取宽高

$('img').onload = function(){
  console.log(this.width)
}

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

window.getComputedStyle($('div')).width

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

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

• encodeURI()
  encodeURI 方法的参数是一个字符串，代表整个URL。它会将元字符和语义字符之外的字符，都进行转义。
• encodeURIComponent()
  encodeURIComponent只转除了语义字符之外的字符，元字符也会被转义。因此，它的参数通常是URL的路径或参数值，而不是整个URL。
• decodeURI()
  decodeURI用于还原转义后的URL。它是encodeURI方法的逆运算。
• decodeURIComponent()
  decodeURIComponent用于还原转义后的URL片段。它是encodeURIComponent方法的逆运算。

为什么要编码

网页URL的合法字符分成两类：URL元字符和语义字符，除了以上字符，其他字符出现在URL之中都必须转义

5.如下函数，判断用户的浏览器类型

var ua = navigator.userAgent.toLowerCase()
//判断Android
function isAndroid(){
  if (/android/gi.test(ua)){
    return true
  }else{
    return false
    }
}
console.log(isAndroid())
//判断Iphone
function isIphone(){
  if (/iphone/gi.test(ua)){
    return true
  }else{
    return false
    }
}
console.log(isIphone())
//判断Ipad
function isIpad(){
  if (/ipad/gi.test(ua)){
    return true
  }else{
    return false
    }
}
console.log(isIpad())
//判断IOS
function isIOS(){
  if (/ios/gi.test(ua)){
    return true
  }else{
    return false
    }
}
console.log(isIOS())

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

cookie

1、用户访问浏览器后，cookie是存储在浏览器上的一小段数据，用来记录某些当页面关闭或者刷新后仍然需要记录的信息。
2、下次访问浏览器，会带上cookie
主要作用，识别用户身份，记录历史

session

session数据存储在服务器
用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息
1、创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
2、浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
3、当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。
session 在实现的过程中需要使用cookie

localStorage

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

7.使用 localStorage封装一个 Storage 对象

var log = console.log.bind(console)
var Storage = {
    set: function(key,value,expire){
        value = {
            value: value,
        }
        if(expire > 0){
            value.expire = [Date.now(), expire * 1000]
        }
        localStorage.setItem(key,JSON.stringify(value))
    },
    get: function(key){
        var value = JSON.parse(localStorage.getItem(key))
        if(value && 'expire' in value){
            var expireDate = value.expire
            if(Date.now() - expireDate[0] > expireDate[1]){
                return(localStorage.removeItem(key))
            }
        }
        return value.value
    }
}
Storage.set('name', '饥人谷')
Storage.set('age', 2, 30) ;  //设置 name 字段存储的值为'饥人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'],  60)

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