瀏覽器本地存儲cookie、localStorage 與 sessionStorage

首先來了解下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本地存儲有 localStoragesessionStorage 兩種
優點:

  • 更大的存儲空間,有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區別

我們經常用到這兩種存儲方式,因此需要清楚瞭解它們之間的相同點和區別。

相同點

  1. localStoragesessionStorage的API調用方法相同;
  2. 不同瀏覽器無法共享localStoragesessionStorage中的信息;

不同點

  1. 訪問權限:
    相同瀏覽器的不同頁面可以共享相同的localStorage(前提是頁面屬於相同域名和端口);
    相同瀏覽器的不同頁面無法共享sessionStorage的信息,只侷限在當前的標籤頁;

  2. 數據的生命週期:
    localStorage 爲永久性保存數據,不會隨着瀏覽器的關閉而消失。按域名進行存儲,可以在同域名下跨頁面訪問,不會和其他域名衝突;
    sessionStorage 爲臨時性保存數據,當頁面關閉就會消失;

3.cookie、localStorage 與 sessionStorage的比較

特性 cookie localStorage sessionStorage
由誰初始化 客戶端或服務器,服務器可以使用Set-Cookie請求頭。 客戶端 客戶端
數據的生命週期 一般由服務器生成,可設置失效時間,如果在瀏覽器生成,默認是關閉瀏覽器之後失效 永久保存,可清除 僅在當前會話有效,關閉頁面後清除
存放數據大小 4KB 5MB 5MB
與服務器通信 每次都會攜帶在HTTP頭中,如果使用cookie保存過多數據會帶來性能問題 僅在客戶端保存 僅在客戶端保存
用途 一般由服務器生成,用於標識用戶身份 用於瀏覽器緩存數據 用於瀏覽器緩存數據
訪問權限 任意窗口 任意窗口 當前頁面窗口
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章