技術標籤：JavaScriptjsjavascript

本地儲存主要有這幾種：localStorage，sessionStorage和cookie。

面試常問點，這三種的區別是什麼~

共同點：

都是儲存在瀏覽器端、且同源的。

區別：

1、cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞，而sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。

2、儲存大小限制也不同，cookie資料不能超過4K，同時因為每次http請求都會攜帶cookie、所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。

3、資料有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉之前有效；localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；cookie：只在設定的cookie過期時間之前有效，即使視窗關閉或瀏覽器關閉。

4、作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localstorage在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。

我這裡的業務需求，使用cookie更加方便。cookie可以設定失效時間，方便資料短暫儲存。

原本元件中對告警資料這塊的處理是這樣的：

if (properties.has("vehicleData")) {
 
    this.vehicleInfo = [];    if (this.vehicleData) {        this.vehicleData.map((item) => {            this.vehicleInfo.push(item.plate);        });        if (this.vehicleInfo.length && this.ksign) {            window.console.log("告警車輛資料", this.vehicleInfo);            this.ksign.registerVehicleTrack(this.vehicleInfo);
 
        }    }}

對後端推過來的告警資料vehicleData進行監聽，在資料發生變化時，將新推送過來的這條資料塞入到一個數組中，因為AR的內建方法registerVehicleTrack需要引數是陣列形式。

走快取的話，就需要稍微改一改。在vehicleInfo 中拿到資料之後，不再直接傳給AR的方法，而是先存入本地，也就是存入cookie中。

const expires = new Date();expires.setTime(expires.getTime() + 60 * 5000); // 當前時間的5分鐘後失效if (this.vehicleInfo.length) {    document.cookie = `vehicleInfo=${this.vehicleInfo.toString()};expires=${expires.toUTCString()}`;    this.doRegister();}

在控制檯Application中可以看到如下：

我把呼叫AR方法那段程式碼抽出來單獨寫成一個方法，因為不僅僅是監聽後端資料這兒需要使用，需要重新整理之後仍能正常呼叫，在元件初始化時也要呼叫，這樣就可以保證後端資料即便沒有推送的時候，也就是沒有監聽到vehicleData變化的時候，也可以拿到cookie中資料傳給registerVehicleTrack。

// 呼叫AR車輛跟蹤方法public doRegister() {    const vehicleList = this.getCookieValue("vehicleInfo");    if (vehicleList.length && this.ksign) {        window.console.log("告警車輛資料", vehicleList);        this.ksign.registerVehicleTrack(vehicleList);    }}

cookie中存入的值是字元形式，不是我這兒registerVehicleTrack需要的陣列，所以需要讀取cookie，並格式化資料。

// 讀取cookie，返回陣列形式public getCookieValue(name: string) {    const value = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)");    const result = value ? value.pop() : "";    let list: string[] = [];    if (result) {        if (result.indexOf(",") === -1) {            list = [result.toString()];        } else {            list = result.toString().split(",");        }    }    return list;}

這樣就ok了，這裡主要記錄一下cookie的使用寫法。之前還真沒用過，sessionStorage和localStorage反而更熟悉些，他們的使用方法都是一樣的。

存值：

sessionStorage.setItem("key", "value");localStorage.setItem("key", "value")

取值：

var value = sessionStorage.getItem("key");  var value = localStorage.getItem("key");

刪除：​​​​​​​

sessionStorage.removeItem("key");  localStorage.removeItem("key");