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
