Local Storage 實作具過期時間的數據存儲與管理

    pooh

    最近在開發功能頁時，公司提出要做使用次數的限制，規定使用者只能用這功能5次，用後端做其實比較好，但前端也能做到，缺點就是使用者是有方法可以繞過去的。

    在開發中，Local Storage 是一種方便且普遍使用的數據保存方式。但本身不支援過期時間設定。這邊簡單的 JavaScript 實作，我們可以為 Local Storage 的數據加上過期時間，並在每次觸發時減少其有效期限，這對於管理需要定期更新或刪除的數據特別有用。

    儲存數據並設置過期時間

    為了儲存數據並設定過期時間，我們創建 setItemWithExpiry 函數。函數有三個參數：key（物件名稱），value（數值），以及**expiryInMinutes**（過期時間，以分鐘計）。

    
function setItemWithExpiry(key, value, expiryInMinutes) {
  const now = new Date();
  const expiryTime = new Date(now.getTime() + expiryInMinutes * 60000);
  const item = {
    value: value,
    expiry: expiryTime.getTime()
  };
  localStorage.setItem(key, JSON.stringify(item));
}

    讀取數值並檢查過期

    當我們從 Local Storage 中讀取數值時，需要檢查它是否已過期。getItemWithExpiry 函數首先檢查指定物件名稱的數值是否存在，如果不存在，則返回 null。如果數值存在，則檢查其是否已過期，若已過期則從 Local Storage 中刪除。

    
function getItemWithExpiry(key) {
  const itemStr = localStorage.getItem(key);
  if (!itemStr) {
    return null;
  }
  const item = JSON.parse(itemStr);
  const now = new Date();
  if (now.getTime() > item.expiry) {
    localStorage.removeItem(key);
    return null;
  }
  return item.value;
}

    更新數值並減少過期時間

    在某些情況下，我們需要更新存儲的數值並同時減少其有效期。updateItemWithExpiry 函數會檢查指定物件名稱的數值是否存在。如果不存在，則添加新數值並設置初始值；如果存在，則減少其值並更新過期時間。

    
function updateItemWithExpiry(key, initialValue, expiryInMinutes) {
  let item = getItemWithExpiry(key);
  if (item === null) {
    setItemWithExpiry(key, initialValue, expiryInMinutes);
  } else {
    setItemWithExpiry(key, Math.max(item - 1, 0), expiryInMinutes);
  }
}

    使用範例

    以下是如何使用這些函數的範例：

    
// 儲存
setItemWithExpiry("名稱", "數值", "過期時間(分)");
// 讀取
getItemWithExpiry("名稱");
// 邏輯判斷
updateItemWithExpiry("名稱", "初始數值", "過期時間(分)");

    透過這些函數，可以有效地管理 Local Storage 中的數據，更符合動態和時效性要求的應用場景。不僅提高了數值存儲的靈活性，也為前端開發帶來了更多的發展空間。

    Related Posts

    發表迴響