最近在開發功能頁時，公司提出要做使用次數的限制，規定使用者只能用這功能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 中的數據，更符合動態和時效性要求的應用場景。不僅提高了數值存儲的靈活性，也為前端開發帶來了更多的發展空間。
+ There are no comments
Add yours