/* 基于layui的通用存储模块 v1.0 */
layui.define(function(exports) {
"use strict"; // 启用严格模式
/**
* 专用Cookie读取方法(不直接暴露)
* @param {string} key - 要获取的Cookie键名
* @returns {any|null} 解析后的值或null
*/
function getCookieItem(key) {
// 分割所有Cookie条目
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim(); // 去除首尾空格
// 匹配目标键值对
if (cookie.startsWith(key + '=')) {
// 解码并提取值部分
const cookieValue = decodeURIComponent(cookie.substring(key.length + 1));
try {
// 尝试解析JSON格式数据
return JSON.parse(cookieValue);
} catch (e) {
// 解析失败返回原始值
return cookieValue;
}
}
}
return null; // 未找到返回null
}
// 存储操作对象
const storage = {
/**
* 数据存储方法
* @param {string} key - 存储键名
* @param {any} value - 存储值(支持所有JSON类型)
* @param {'local'|'session'|'cookie'} [type='local'] - 存储介质类型
* @param {number} [expires=3600000] - 过期时间(毫秒)
* @returns {boolean} 操作是否成功
*/
set(key, value, type = 'local', expires = 3600000) {
// 计算绝对过期时间戳
const expiresTime = Date.now() + expires;
// 封装存储数据结构
const data = {
value: value, // 实际存储值
expires: expiresTime // 绝对过期时间戳
};
try {
switch (type.toLowerCase()) {
case 'local':
localStorage.setItem(key, JSON.stringify(data));
break;
case 'session':
sessionStorage.setItem(key, JSON.stringify(data));
break;
case 'cookie':
// 创建Date对象用于cookie过期时间
const expiresDate = new Date(expiresTime);
// 设置cookie(自动编码值)
document.cookie = `${key}=${encodeURIComponent(JSON.stringify(data))};expires=${expiresDate.toUTCString()};path=/`;
break;
default:
throw new Error('不支持的存储类型: ' + type);
}
return true;
} catch (e) {
console.error('存储失败:', e);
return false;
}
},
/**
* 数据读取方法
* @param {string} key - 要读取的键名
* @param {'local'|'session'|'cookie'} [type='local'] - 存储介质类型
* @returns {any|null} 读取到的值或null
*/
get(key, type = 'local') {
let data = null;
try {
switch (type.toLowerCase()) {
case 'local':
data = localStorage.getItem(key);
break;
case 'session':
data = sessionStorage.getItem(key);
break;
case 'cookie':
data = getCookieItem(key);
break;
default:
throw new Error('不支持的存储类型: ' + type);
}
// 解析存储数据
data = data ? JSON.parse(data) : null;
// 检查数据有效性
if (data && Date.now() <= data.expires) {
return data.value; // 返回有效值
}
// 自动清理过期数据
if (data) this.remove(key, type);
return null;
} catch (e) {
console.error('读取失败:', e);
return null;
}
},
/**
* 数据更新方法
* @param {string} key - 要更新的键名
* @param {any} newValue - 新的值
* @param {boolean} [resetExpires=false] - 是否重置过期时间
* @param {'local'|'session'|'cookie'} [type='local'] - 存储介质类型
* @param {number} [newExpires=3600000] - 新的过期时间(毫秒)
* @returns {boolean} 更新是否成功
*/
update(key, newValue, resetExpires = false, type = 'local', newExpires = 3600000) {
// 获取原始数据
const originalData = this.get(key, type);
if (!originalData) return false;
// 构造新数据
const newData = {
value: newValue,
expires: resetExpires ? Date.now() + newExpires : originalData.expires
};
try {
switch (type.toLowerCase()) {
case 'local':
localStorage.setItem(key, JSON.stringify(newData));
break;
case 'session':
sessionStorage.setItem(key, JSON.stringify(newData));
break;
case 'cookie':
const expiresDate = new Date(newData.expires);
document.cookie = `${key}=${encodeURIComponent(JSON.stringify(newData))};expires=${expiresDate.toUTCString()};path=/`;
break;
}
return true;
} catch (e) {
console.error('更新失败:', e);
return false;
}
},
/**
* 删除指定数据
* @param {string} key - 要删除的键名
* @param {'local'|'session'|'cookie'} [type='local'] - 存储介质类型
* @returns {boolean} 删除是否成功
*/
remove(key, type = 'local') {
try {
switch (type.toLowerCase()) {
case 'local':
localStorage.removeItem(key);
break;
case 'session':
sessionStorage.removeItem(key);
break;
case 'cookie':
// 设置过期时间为过去立即失效
document.cookie = `${key}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
break;
}
return true;
} catch (e) {
console.error('删除失败:', e);
return false;
}
},
/**
* 清除存储数据
* @param {'all'|'local'|'session'|'cookie'} [type='all'] - 清除类型
*/
clearAll(type = 'all') {
try {
// 处理localStorage
if (type === 'all' || type === 'local') {
localStorage.clear();
}
// 处理sessionStorage
if (type === 'all' || type === 'session') {
sessionStorage.clear();
}
// 处理Cookie
if (type === 'all' || type === 'cookie') {
const cookies = document.cookie.split(';');
for (let cookie of cookies) {
const eqPos = cookie.indexOf('=');
const name = eqPos > -1 ? cookie.substr(0, eqPos).trim() : cookie.trim();
// 逐个设置过期
document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
}
}
return true;
} catch (e) {
console.error('清除失败:', e);
return false;
}
}
};
// 暴露模块
exports('storage', storage);
});功能说明
set()：存储数据时自动添加时间戳，支持三种存储方式
get()：读取时自动检查过期数据并清理
update()：可选择保留原有效期或重置时间
remove()：精准删除指定类型存储
clearAll()：支持批量清理存储空间
智能清理：每次读取数据时自动检查过期状态
统一API：三种存储介质使用相同调用方式
注意事项
Cookie操作受同源策略限制
存储复杂对象时会自动序列化/反序列化
时间参数统一使用毫秒单位
清除Cookie时会清理当前路径下的所有Cookie
建议在页面初始化时调用clearAll('all')进行数据迁移
主要功能说明
存储策略
数据封装：所有存储值都包含原始值和过期时间戳
自动清理：读取时自动移除过期数据
异常处理：所有操作包含try-catch保护
方法说明
set(): 智能处理不同类型存储，自动序列化数据get(): 返回原始数据类型，自动过滤过期数据update(): 支持保留或重置过期时间的灵活更新remove(): 精准删除指定存储项clearAll(): 支持批量清理不同存储类型
特殊处理
Cookie处理：自动进行URI编码/解码
时间处理：统一使用毫秒级时间戳
类型转换：自动处理JSON序列化/反序列化
错误处理
控制台输出详细错误信息
返回布尔值指示操作结果
自动处理存储配额超限等情况
使用建议
初始化清理：
javascript
复制
// 应用启动时清理过期数据 storage.clearAll('all');类型安全：
javascript
复制
// 推荐指定存储类型 storage.set('key', value, 'local');时间设置：
javascript
复制
// 使用预定义时间常量 const ONE_DAY = 86400000; storage.set('dailyData', data, 'local', ONE_DAY);数据验证：
javascript
复制
// 获取数据时建议设置默认值 const config = storage.get('appConfig') || defaultConfig;
本模块通过统一API简化了不同存储介质的操作，同时保证了数据安全性和过期处理机制，适用于需要同时操作多种存储介质的Web应用场景。
评论区