window.onload 和 document.onDOMContentLoaded 有什么區(qū)別？
//頁面所有資源加載完成
window.onload = function(){
console.log('window loaded')
}
//DOM結(jié)構(gòu)解析完成
document.addEventListenner("DOMContentLoaded",function(){
console.log("DOMContentLoaded")
})
如何獲取圖片真實(shí)的寬高
document.addEventListener('DOMContentLoaded', function(){
console.log('DOMContentLoaded ')
})
console.log($('img').width) //0
$('img').onload = function(){ //圖片請(qǐng)求到了,觸發(fā)事件
console.log(this.width) //此時(shí)才能得到圖片的真實(shí)大小
}
如何獲取元素的真實(shí)寬高
window.getComputedStyle(node).height/width返回的是相應(yīng)的寬高，單位為像素.
URL 如何編碼解碼？為什么要編碼？
- JavaScript提供四個(gè)URL的編碼/解碼方法。
decodeURI()decodeURIComponent()encodeURI()encodeURIComponent()
encodeURI方法不會(huì)對(duì)下列字符編碼
1. ASCII字母
2. 數(shù)字
3. ~!@#$&*()=:/,;?+'
encodeURIComponent方法不會(huì)對(duì)下列字符編碼
1. ASCII字母
2. 數(shù)字
3. ~!*()'
為什么編碼?
- 為什么需要Url編碼，通常如果一樣?xùn)|西需要編碼，說明這樣?xùn)|西并不適合傳輸。原因多種多樣，如
Size過大，包含隱私數(shù)據(jù)，對(duì)于Url來說，之所 以要進(jìn)行編碼，是因?yàn)?code>Url中有些字符會(huì)引起歧義 - Url參數(shù)字符串中使用
key=value鍵值對(duì)這樣的形式來傳參，鍵值對(duì)之間以&符號(hào)分隔，如/s?q=abc&ie=utf- 8。如果你的value字符串中包含了=或者&，那么勢(shì)必會(huì)造成接收Url的服務(wù)器解析錯(cuò)誤，因此必須將引起歧義的&和=符號(hào)進(jìn)行轉(zhuǎn)義， 也就是對(duì)其進(jìn)行編碼 - Url的編碼格式采用的是
ASCII碼，而不是Unicode，這也就是說你不能在Url中包含任何非ASCII字符，例如中文。否則如果客戶端瀏 覽器和服務(wù)端瀏覽器支持的字符集不同的情況下，中文可能會(huì)造成問題。
補(bǔ)全如下函數(shù)，判斷用戶的瀏覽器類型
function isAndroid(){
}
funcnction isIphone(){
}
function isIpad(){
}
function isIOS(){
}
function isAndroid(){
return /Android/.test(navigator.userAgent);
}
funcnction isIphone(){
return /iPhone/.test(navigator.userAgent);
}
function isIpad(){
return /iPad/.test(navigator.userAgent);
}
function isIOS(){
return /(iPad)|(iPhone)/i.test(navigator.userAgent);
}
cookie & session &localStorage 分別是什么
看到cookie,是不是想到了餅干,哈哈,今天我們要說的可不是餅干,今天我們要說的是瀏覽器的cookie
什么是cookie呢?
- cookie是存儲(chǔ)在瀏覽器上的一小段數(shù)據(jù)，用來記錄某些當(dāng)頁面關(guān)閉或者刷新后仍然需要記錄的信息。在控制臺(tái)用 「document.cookie」查看你當(dāng)前正在瀏覽的網(wǎng)站的cookie。
如何設(shè)置?
- 服務(wù)器端
- 可以通過在http返回里面設(shè)置
Set-cookie值告訴瀏覽器
- 可以通過在http返回里面設(shè)置
- 瀏覽器端
- 打開瀏覽器調(diào)試器,選到
Application,找到cookie選項(xiàng)
- 打開瀏覽器調(diào)試器,選到
找到cookie
cookie屬性
| 屬性名 | 默認(rèn)值 | 作用 |
|---|---|---|
Name(必填) |
名 | |
Value(必填) |
值 | |
| Domain | 當(dāng)前文檔域 | 作用域 |
| Path | 當(dāng)前文檔路徑 | 作用路徑 |
| Expires/Max-age | 瀏覽器會(huì)話時(shí)間 | 失效時(shí)間 |
| secure | false | htttps協(xié)議時(shí)生效 |
作用域
作用域
作用路徑
作用路徑
Cookie -> javascript對(duì)象
cookie信息
//轉(zhuǎn)化為js對(duì)象
function getcookie () {
var cookie = {};
var all = document.cookie;
if (all === '')
return cookie;
var list = all.split('; ');
for (var i = 0; i < list.length; i++) {
var item = list[i];
var p = item.indexOf('=');
var name = item.substring(0, p);
name = decodeURIComponent(name);
var value = item.substring(p + 1);
value = decodeURIComponent(value);
cookie[name] = value;
}
return cookie;
}
cookie的設(shè)置/修改
//設(shè)置
document.cookie = "name = value"
//修改
function setCookie (name, value, expires, path, domain, secure) {
var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires)
cookie += '; expires=' + expires.toGMTString();
if (path)
cookie += '; path=' + path;
if (domain)
cookie += '; domain=' + domain;
if (secure)
cookie += '; secure=' + secure;
document.cookie = cookie;
}
刪除cookie
function removeCookie (name, path, domain) {
document.cookie = name + '='
+ '; path=' + path
+ '; domain=' + domain
+ '; max-age=0';
}
缺陷
- 流量代價(jià)
- 安全性問題
- 大小限制
Storage
local Storagesession Storage
Storage
因?yàn)閏ookie有這么一些缺陷,所以HTML5提供了storage存儲(chǔ)替代方案
localStorage
- 用于將大量數(shù)據(jù)（最大5M）保存在瀏覽器中，保存后
數(shù)據(jù)永遠(yuǎn)存在不會(huì)失效過期，除非用 js手動(dòng)清除。 - 不參與網(wǎng)絡(luò)傳輸。
- 一般用于性能優(yōu)化，可以保存圖片、js、css、html 模板、大量數(shù)據(jù)。
可以理解js對(duì)象
- 讀取
localStorage.name
- 添加/修改
localStorage.name = 'value'(string)
- 刪除
delete localStorage.name
API
- 獲取鍵值對(duì)數(shù)量
localStorage.length
- 讀取
localStorage.getItem("name"),localStorage.key(i)
- 添加/修改
localStorage.setItem("name","value")
- 刪除對(duì)應(yīng)鍵值
localStorage.removeItem("name")
- 刪除所有數(shù)據(jù)
localStorage.clear()
測(cè)試API
測(cè)試OK
session
當(dāng)一個(gè)用戶打開淘寶登錄后，刷新瀏覽器仍然展示登錄狀態(tài)。服務(wù)器如何分辨這次發(fā)起請(qǐng)求的用戶是剛才登錄過的用戶呢？這里就使用了session保存狀態(tài)。用戶在輸入用戶名密碼提交給服務(wù)端，服務(wù)端驗(yàn)證通過后會(huì)創(chuàng)建一個(gè)session用于記錄用戶的相關(guān)信息，這個(gè) session 可保存在服務(wù)器內(nèi)存中，也可保存在數(shù)據(jù)庫中。
- 創(chuàng)建session后，會(huì)把關(guān)聯(lián)的session_id 通過setCookie 添加到http響應(yīng)頭部中。
- 瀏覽器在加載頁面時(shí)發(fā)現(xiàn)響應(yīng)頭部有 set-cookie字段，就把這個(gè)cookie 種到瀏覽器指定域名下。
- 當(dāng)下次刷新頁面時(shí)，發(fā)送的請(qǐng)求會(huì)帶上這條cookie， 服務(wù)端在接收到后根據(jù)這個(gè)session_id來識(shí)別用戶。
cookie 是存儲(chǔ)在瀏覽器里的一小段「數(shù)據(jù)」，而session是一種讓服務(wù)器能識(shí)別某個(gè)用戶的「機(jī)制」，session 在實(shí)現(xiàn)的過程中需要使用cookie。 二者不是同一維度的東西。
使用 localStorage封裝一個(gè) Storage 對(duì)象，達(dá)到如下效果
Storage.set('name', '饑人谷')
Storage.set('age', 2, 30) ; //設(shè)置 name 字段存儲(chǔ)的值為'饑人谷'
Storage.set('teachers', ['ruoyu', 'fangfang', 'tom'], 60)
Storage.get('name') // ‘饑人谷’
Storage.get('age') // 如果不超過30秒，返回?cái)?shù)字類型的2；如果超過30秒，返回 undefined，并且 localStorage 里清除 age 字段
Storage.get('teachers') //如果不超過60秒，返回?cái)?shù)組； 如果超過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]
}
}
}
})()
