關於http的瑣碎筆記

HTTP的格式

HTTP請求由四部分組成，分別是狀態行，請求頭，回車，請求正文

• 狀態行：請求格式Method 資源路徑URL 協議/版本號
• 請求頭：包含訪問的域名，Cookie，Content-Type，Content-Length等信息
• 回車
• 請求正文：就是HTTP向服務端發送的數據

1 動詞 路徑 協議/版本
2 key1:value1
2 key2:value2
2 key3:value3
2 Content-Type:application/x-www-form-urlencoded
2 Host:www.baidu.com
2 User-Agent:curl/7.54.0
3				回車用來區分請求頭和請求正文
4 要上傳的數據

複製代碼

1. 請求最多包含4部分，最少包含3部分(也就是請求正文部分能夠爲空)
2. 第三部分永遠是一個回車，用來區分第三部分和第四部分
3. 動詞有GET POST PUT PATCH DELETE HEAD OPTIONS等
4. 這裏的路徑包括【查詢參數】，但不包括【描點】
5. 若是沒有寫路徑，那麼路徑默認爲/
6. 第2部分中的Content-Type標註了第4部分的格式

HTTP響應格式與請求格式同樣

在http的響應中

Content-Length:響應正文的長度，單位爲KB
Content-Type:text/html 響應正文的格式
複製代碼

HTTP狀態碼

• 1xx Http請求已經接受，繼續處理請求
• 2xx 表示成功
• 3xx 重定向
• 4xx 客戶端錯誤
• 5xx 服務端錯誤

常見狀態碼的含義：

• 200---請求正常處理完成
• 301---永久重定向
• 302---臨時重定向
• 304---沒有發送請求，獲取本地的緩存
• 400---客戶端語法錯誤
• 401---請求未經受權
• 403---請求被拒，沒有訪問權限
• 404---請求的url不存在
• 500---服務端永久錯誤
• 503---服務端發生臨時錯誤

Cookie特色

1. 服務端經過設置響應頭的Set-Cookie來設置Cookie

//這裏用node演示
res.setHeader('Set-Cookie','user=admin');
複製代碼

2. 瀏覽器獲得Cookie以後，每次請求都會帶上Cookie
3. 服務端讀取到http請求中的cookie就知道了登陸用戶的信息

if(req.headers.cookie.user=='admin'){
    res.end("歡迎管理員");
}
複製代碼

cookie存在的問題：

1. 不一樣瀏覽器不能公用同一個cookie，我在chrome拿到的cookie不能在Safrai上使用
2. Cookie能夠隨便改，不安全
3. Cookie存在盤的一個文件夾裏
4. 設置了cookie後，全部請求都會帶上cookie
5. cookie有效期默認是20分鐘，後端能夠強制改變時期

res.setHeader("Set-Cookie",'user=admin;max-age=300000；httpOnly');
//max-age能夠改變cookie的有效期
//httpOnly禁止用戶操做cookie
複製代碼

session和cookie的關係

爲了避免讓用戶去篡改cookie的值，咱們能夠把cookie的值存在服務端的一塊內存中，這塊內存叫作session，而拿到該cookie的值，須要一個隨機的key值

let sessionId = Math.random()*100000;
sessions[sessionId] = {user:admin};
res.setHeader('Set-Cookie',`sessionId=${sessionId}`);
//當瀏覽器再次發送請求時，就會帶上sessionId
let sessionId = req.headers.cookie.sessionId;
let user = sessions[sessionId]
if(user=='admin'){
	res.end("歡迎管理員")；
}
複製代碼

1. 因此session是基於cookie的，
2. session是佔用服務器內存的
3. 當這個隨機數越大，用戶越不可能拿到別的用戶的cookie值

Http緩存

web性能優化裏有設置HTTP緩存這一條，不過是後端操做的

res.setHeader('Cache-Control','max-age=300');
//在30秒內，相同路徑的http請求會指向本地的緩存，
//不會真正的發送請求，
//這一塊在不斷刷新網頁時，我但願以前已經請求的資源不用再次請求時，能夠設置
//首頁通常不會設置http緩存，否則用戶不知道你網頁更新的消息
複製代碼

localStorage是啥

localStorage是H5新出的api，能夠用來設置本地緩存

• localStorage.getItem('name') 獲取緩存內容
• localStorage.setItem('name','hzw') 設置緩存
• localStorage.clear()清除全部緩存

注意：

localStorage只能存String

全部存進去的內容，都會自動調用toString()的方法

localStorage.setItem('name',{name:'hzw'});
//({}).toString() [object Object]
複製代碼

若是真的須要存進對象，那麼就用json格式的

localStroage.setItem('name',JSON.stringify({name:'hzw'}));
//
複製代碼

應用場景：

localStorage通常用來持久化存儲信息

var a = 1;
//在瀏覽器的窗口把a改成2；
//但再次刷新網頁時，a又變爲了1
//這就不能持久化的保存信息
複製代碼

let a = localStorage.getItem('a');
if(!a){
   a=1;
}else{
    a=(Number)a+1;
}
localStorage.setItem('a',a);
//每次刷新網頁，a就會加1，這就是持久化存儲信息
複製代碼

提示頁面只提示一次

let already = localStorage.getItem('已經提示')；
if(!already){
	localStorage.setItem('已經提示了'，true);
    alter("該網頁已經改版");
}
複製代碼

localStorage的特色：

1. 跟HTTP無關
2. HTTP不會帶上localStorage
3. 只有相同的域名的頁面才能互相讀取localStorage
4. 每一個域名localStorage最大存儲量5MB左右
5. 永久有效，除非手動清除緩存

sessionStorage也是H5的api

調用跟localStorage同樣，特色只有第5條不一樣，sessionStorage在用戶關閉頁面時，就失效

結語

這是一篇筆記，寫得不是很好，若是有錯誤的地方，還請看官們指正！感激涕零！