window.onload 和 document.onDOMContentLoaded 有什么区别？
- 主要区别
- 当onload事件触发时，页面上所有的DOM，样式表，脚本，图片和flash都已经加载完成了
- 当onDOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片和flash
如何获取图片真实的宽高？
//比如想获取id为id的元素宽高
window.getComputedStyle(document.getElementByTagname("img")).height;
window.getComputedStyle(document.getElementByTagname("img")).width;
使用getComputedStyle方法的前提是页面的资源加载完毕 onload 事件触发后
如何获取元素的真实宽高？
//比如想获取id为id的元素宽高
window.getComputedStyle(document.getElementById("id")).height;
window.getComputedStyle(document.getElementById("id")).width;
使用getComputedStyle方法的前提是页面的DOM结构加载完毕 即onDOMContentLoaded 事件触发后
URL 如何编码解码？为什么要编码？
JavaScript提供四个URL的编码/解码方法。
- decodeURI()
- decodeURIComponent()
- encodeURI()
- encodeURIComponent()
区别 - encodeURI方法不会对下列字符编码
- ASCII字母
- 数字
~!@#$&*()=:/,;?+'
- encodeURIComponent方法不会对下列字符编码
- ASCII字母
- 数字
-
~!*()'
也就是说encodeURIComponent比encodeURI编码的范围更大。
- 而decodeURI()方法和decodeURIComponent()方法就是上述两种编码对应的解码方法。
举个例子 - 我们对url
https://www.baidu.com/s?wd=洛阳使用encodeURI方法编码会得到"https://www.baidu.com/s?wd=%E6%B4%9B%E9%98%B3" - 而如果使用encodeURIComponent方法编码，得到
https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%E6%B4%9B%E9%98%B3可以看出与encodeURL方法相比
?、=和/均被编码。解码时，对https%3A%2F%2Fwww.baidu.com%2Fs%3Fwd%3D%E6%B4%9B%E9%98%B3使用decodeURIComponent方法得到https://www.baidu.com/s?wd=洛阳，这与对"https://www.baidu.com/s?wd=%E6%B4%9B%E9%98%B3"使用decodeURI方法得到的结果一致 - 如果编码方式与解码方式使用不同的方法，比如编码使用encodeURI()方法，而解码使用decodeURIComponent方法。我们只需记住后者范围要比前者范围要宽，即decodeURIComponent方法可以解码encodeURI()方法编码的URL，但是decodeURI方法无法解码encodeURIComponent方法编码的URL
用于判断用户浏览器类型的函数
function isAndroid(){
if(navigator.userAgent.search("Android")>(-1)){return "Android浏览器"}
else{return "不是Android浏览器"}
}
function isIphone(){
if(navigator.userAgent.search("iPhone")>(-1)){return "iPhone浏览器"}
else{return "不是iPhone浏览器"}
}
function isIpad(){
if(navigator.userAgent.search("iPad")>(-1)){return "iPad浏览器"}
else{return "不是iPad浏览器"}
}
function isIOS(){
if(navigator.userAgent.search("Safari")>(-1)){return "ios浏览器"}
else{return "不是ios浏览器"}
}
使用localStorage封装一个Storage对象，使其达到如下效果：
Storage.set('name', '霸天虎')
Storage.set('age', 2, 30) ; //设置 name 字段存储的值为'霸天虎'
Storage.set('teachers', ['xiaolong', 'xiaohu', 'xiaoxin'], 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:Date.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 localStorage[key]
}
}
}
})()
cookie & session &localStorage 分别是什么？
- cookie
- Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。
- 浏览器需要保存这段数据，不得轻易删除。
- 此后每次浏览器访问该服务器，都必须带上这段数据。
如何使用 Cookie - 第一个作用是识别用户身份。
比如用户 A 用浏览器访问了 http://a.com，那么 http://a.com 的服务器就会立刻给 A 返回一段数据「uid=1」（这就是 Cookie）。当 A 再次访问 http://a.com 的其他页面时，就会附带上「uid=1」这段数据。
同理，用户 B 用浏览器访问 http://a.com 时，http://a.com 发现 B 没有附带 uid 数据，就给 B 分配了一个新的 uid，为2，然后返回给 B 一段数据「uid=2」。B 之后访问 http://a.com 的时候，就会一直带上「uid=2」这段数据。
借此，http://a.com 的服务器就能区分 A 和 B 两个用户了。 - 第二个作用是记录历史。
假设 http://a.com 是一个购物网站，当 A 在上面将商品 A1 、A2 加入购物车时，JS 可以改写 Cookie，改为「uid=1; cart=A1,A2」，表示购物车里有 A1 和 A2 两样商品了。
这样一来，当用户关闭网页，过三天再打开网页的时候，依然可以看到 A1、A2 躺在购物车里，因为浏览器并不会无缘无故地删除这个 Cookie。
借此，就达到里记录用户操作历史的目的了。
- session
当一个用户打开淘宝登录后，刷新浏览器仍然展示登录状态。服务器如何分辨这次发起请求的用户是刚才登录过的用户呢？这里就使用了session保存状态。用户在输入用户名密码提交给服务端，服务端验证通过后会创建一个session用于记录用户的相关信息，这个 session 可保存在服务器内存中，也可保存在数据库中。
- 创建session后，会把关联的session_id 通过setCookie 添加到http响应头部中。
- 浏览器在加载页面时发现响应头部有 set-cookie字段，就把这个cookie 种到浏览器指定域名下。
- 当下次刷新页面时，发送的请求会带上这条cookie， 服务端在接收到后根据这个session_id来识别用户。
- cookie 是存储在浏览器里的一小段「数据」，而session是一种让服务器能识别某个用户的「机制」，session 在实现的过程中需要使用cookie。 二者不是同一维度的东西。
- localStorage
- localStorage HTML5本地存储web storage特性的API之一，用于将大量数据（最大5M）保存在浏览器中，保存后数据永远存在不会失效过期，除非用 js手动清除。
- 不参与网络传输。
- 一般用于性能优化，可以保存图片、js、css、html 模板、大量数据。
