首先來了解下HTTP協議
- http:超文本傳輸協議,無狀態,同一個客戶端的這次請求和上次請求沒有對應關係。
- https:超文本傳輸安全協議,HTTP + SSL / TLS,也就是在 HTTP 上又加了一層處理加密信息的模塊。服務端和客戶端的信息傳輸都會通過 TLS 進行加密,所以傳輸的數據都是加密後的數據。
對http
服務器來說,它並不知道這兩個請求來自同一個客戶端,爲了解決這個問題,Web程序引入了cookie
機制來維護狀態。
1.cookie
1.1 cookie是什麼
cookie
是瀏覽器提供的一種機制,可以由JavaScript對其進行操作(設置、讀取、刪除),是一種會話跟蹤技術,是存儲於訪問者計算機中的一小塊數據
會話:用戶進入網站,開始瀏覽信息到關閉瀏覽器的過程,就稱之爲是一次會話;
會話跟蹤技術:瀏覽器和服務器之間在進行多次請求間共享數據的過程,就稱爲會話跟蹤技術;
1.2 cookie的特性
- cookie可以實現跨頁面全局變量
- cookie可以跨越同域名下的多個網頁,但不能跨域使用
- cookie會隨着HTTP請求發送給服務器
- cookie會存儲於訪問者的計算機中
- 同一個網站中所有頁面共享一套cookie
- 可以設置有效期限
- 存儲空間爲4KB左右
1.3 cookie應用場景
- 會話狀態管理(如用戶登錄狀態、購物車等)
- 個性化設置(保存用戶設置的樣式等)
- 瀏覽器行爲跟蹤(如跟蹤分析用戶行爲等)
1.4 操作cookie
每個cookie都是一個鍵/值對格式的字符串(key=value)
設置cookie:
document.cookie="name1=qxj";
document.cookie="name2=xm";
如果要改變一個cookie
的值,只能重新賦值
設置有效期(expires):
var d=new Date();
d.setDate(d.getDate()+3); //按天數設置
document.cookie="user3=xd; expires="+d;
讀取cookie:
var cookies = document.cookie;
只能夠一次獲取所有的cookie
值,使用時必須自己解析這個字符串,來獲取指定的cookie
值
刪除cookie:cookie過期會自動消失
要手動刪除一個cookie,可將其有效期設爲一個過去的時間
var d=new Date();
d.setDate(d.getDate()-1);
document.cookie="user1=xh; expires="+d;
2.HTML5本地存儲(WebStorage)
H5本地存儲有 localStorage
與 sessionStorage
兩種
優點:
- 更大的存儲空間,有5MB左右
- 不會隨HTTP請求發送給服務器
- 有方便的API操作
- 移動端普及高
2.1 localStorage詳解
localStorage
爲永久性保存數據,不會隨着瀏覽器的關閉而消失。
按域名進行存儲,可以在同域名下跨頁面訪問,不會和其他域名衝突。
按鍵值對存儲:key/value
在Angular項目中往往需要建一個 LocalStorageService 來進行本地存儲,以此爲例,講解localStorage的用法:
// localstorage.service.ts
import {Injectable} from '@angular/core'
@Injectable()
export class LocalStorage {
public static localStorage: any = window.localStorage
constructor() {
if (!LocalStorage.localStorage) {
throw new Error('您的瀏覽器不支持本地存儲(LocalStorage)!')
}
}
// localStorage只支持string類型的存儲
public static set(key: string, value: any): void {
// 如果key已經存在,則覆蓋key對應的value
// 如果不存在則添加key與value
LocalStorage.localStorage.setItem(key, JSON.stringify(value))
}
public static get(key: string): string {
// localStorage.getItem(key) 獲取key對應的value,如果key不存在則返回null
let value = LocalStorage.localStorage.getItem(key)
try {
value = JSON.parse(value)
} catch (e) {
}
return value
}
public static remove(key: string): any {
// 刪除某個鍵值對
LocalStorage.localStorage.removeItem(key)
}
public static clear(): any {
// 將同域名下的所有數據都清空
LocalStorage.localStorage.clear()
}
}
2.2 sessionStorage詳解
sessionStorage
各種操作與 localStorage
一樣
2.3 localStorage與sessionStorage區別
我們經常用到這兩種存儲方式,因此需要清楚瞭解它們之間的相同點和區別。
相同點:
localStorage
與sessionStorage
的API調用方法相同;- 不同瀏覽器無法共享
localStorage
或sessionStorage
中的信息;
不同點:
-
訪問權限:
相同瀏覽器的不同頁面可以共享相同的localStorage
(前提是頁面屬於相同域名和端口);
相同瀏覽器的不同頁面無法共享sessionStorage
的信息,只侷限在當前的標籤頁; -
數據的生命週期:
localStorage
爲永久性保存數據,不會隨着瀏覽器的關閉而消失。按域名進行存儲,可以在同域名下跨頁面訪問,不會和其他域名衝突;
sessionStorage
爲臨時性保存數據,當頁面關閉就會消失;
3.cookie、localStorage 與 sessionStorage的比較
特性 | cookie | localStorage | sessionStorage |
---|---|---|---|
由誰初始化 | 客戶端或服務器,服務器可以使用Set-Cookie請求頭。 | 客戶端 | 客戶端 |
數據的生命週期 | 一般由服務器生成,可設置失效時間,如果在瀏覽器生成,默認是關閉瀏覽器之後失效 | 永久保存,可清除 | 僅在當前會話有效,關閉頁面後清除 |
存放數據大小 | 4KB | 5MB | 5MB |
與服務器通信 | 每次都會攜帶在HTTP頭中,如果使用cookie保存過多數據會帶來性能問題 | 僅在客戶端保存 | 僅在客戶端保存 |
用途 | 一般由服務器生成,用於標識用戶身份 | 用於瀏覽器緩存數據 | 用於瀏覽器緩存數據 |
訪問權限 | 任意窗口 | 任意窗口 | 當前頁面窗口 |