不說廢話，看這個文檔的大部分都是程序員悲立，所以直接上代碼了鹿寨。

首先寫了一個 CookieUtils.tsx 工具類

/**
 * 添加 cookie
 * @param name 名稱
 * @param value 值
 * @param expiresHours 過期時間
 */
export function addCookie(name, value, expiresHours) {
    let cookieString = `${name}=${escape(value)}`;
    // 判斷是否設(shè)置過期時間,0代表關(guān)閉瀏覽器時失效
    if (expiresHours > 0) {
        const date = new Date();
        date.setTime(date.getTime() + expiresHours * 1000);
        cookieString = `${cookieString};expires=${date.toUTCString()}`;
    }
    document.cookie = cookieString;
}

/**
 * 修改 cookie
 * @param name 名稱
 * @param value 值
 * @param expiresHours 過期時間
 */
export function editCookie(name, value, expiresHours) {
    let cookieString = `${name}=${escape(value)}`;
    if (expiresHours > 0) {
        const date = new Date();
        date.setTime(date.getTime() + expiresHours * 1000); // 單位是毫秒
        // @ts-ignore
        cookieString = `${cookieString};expires=${date.toGMTString()}`;
    }
    document.cookie = cookieString;
}

/**
 * 根據(jù)名字獲取cookie的值
 * @param name
 */
export function getCookieValue(name) {
    const strCookie = document.cookie;
    const arrCookie = strCookie.split('; ');
    for (const cookie of arrCookie) {
        const arr = cookie.split('=');
        if (arr[0] === name) {
            console.log('unescape(arr[1])', unescape(arr[1]));
            return unescape(arr[1]);
        }
    }
}

使用方式

1、在成功獲取短信驗證碼后執(zhí)行 addCookie 方法薪夕，

addCookie('secondsremained', 60, 60); // 添加cookie記錄,有效時間60s

2脚草、定義你的倒計時函數(shù)，并使用 getCookieValue和 editCookie 原献，進行獲取cookie中的 剩余秒數(shù)馏慨，并在倒計時的過程中修改Cookie中存儲的剩余秒數(shù)。

private settime = () => {
        let countdown = 60;
        // @ts-ignore
        countdown = getCookieValue('secondsremained');
        const timer = setInterval(() => {
            if (countdown <= 0) {
                clearInterval(timer);
                this.captchaBtnText = '重新獲取';
            } else {
                this.captchaBtnText = `重新獲取(${countdown}s)`;
                countdown--;
            }
            editCookie('secondsremained', countdown, countdown + 1);
        }, 1000);
    }

3嚼贡、再 react 組件的 componentWillMount 或者 componentDidMount 生命周期函數(shù)中執(zhí)行下面的驗證熏纯，如果Cookie中存在剩余倒計時的秒數(shù)，就開始執(zhí)行倒計時函數(shù)粤策。

public componentDidMount() {
      const countdown = getCookieValue('secondsremained') ? getCookieValue('secondsremained') : 0; // 獲取cookie值
      if (countdown !== undefined && countdown > 0) {
          this.settime(); // 開始倒計時
      }
}

以上就是全部過程了，簡單吧误窖，喜歡就給一個小星星吧叮盘。