文章介绍了如何在JavaScript中生成动态和静态存储键，以及如何使用localStorage、sessionStorage和cookie进行数据存储和管理，包括设置、获取、移除和统一管理的概念。
storageKeySuffix：生成存储键的后缀字符串
/**
* 生成存储键的后缀字符串
* @author zhongjyuan
* @email zhongjyuan@outlook.com
* @website http://zhongjyuan.club
* @param {boolean} dynamic 是否使用动态后缀
* @param {string} suffix 静态后缀值，默认为 "zhongjyuan"
* @returns {string} 存储键的后缀字符串
*
* @example
* storageKeySuffix(); // 假设当前窗口的端口号为 "8080"，返回 "_8080"
*
* @example
* storageKeySuffix(false); // 返回 "_zhongjyuan"
*
* @example
* storageKeySuffix(false, "example"); // 返回 "_example"
*/
storageKeySuffix: function (dynamic = true, suffix = zhongjyuan.config.storage.suffix) {
let keySuffix;
if (dynamic) {
suffix = window.location.port;
}
// 根据suffix的值，确定使用不同的后缀函数
if (suffix) {
// 如果suffix存在，则定义一个名为keySuffix的函数，返回带下划线前缀的suffix
keySuffix = function () {
return `_${suffix}`;
};
} else {
// 如果suffix不存在，则定义一个名为keySuffix的函数，返回空字符串
keySuffix = function () {
return "";
};
}
// 返回实际的后缀字符串
return keySuffix();
},
storageKey：缓存的Key
/**
* 缓存的Key
* @author zhongjyuan
* @email zhongjyuan@outlook.com
* @website http://zhongjyuan.club
* @param {*} key 键
* @returns
* @example
* config.storageKeyType = "const";
* config.storageKeySuffix = "example";
*
* let key1 = "data";
* let mergedKey1 = storageKey(key1); // 调用storageKey函数，在key后面添加后缀
* console.log(mergedKey1); // 输出："data_example"
*
* config.storageKeyType = "dynamic";
* window.location.port = "8080";
*
* let key2 = "info";
* let mergedKey2 = storageKey(key2); // 调用storageKey函数，不添加后缀
* console.log(mergedKey2); // 输出："info_8080"
*/
storageKey: function (key) {
let mergeKey;
const suffix = zhongjyuan.helper.storageKeySuffix(); // 获取存储键的后缀
if (suffix) {
mergeKey = function (key) {
if (typeof key !== "string") {
throw new Error("key 必须是字符串！！"); // 如果key不是字符串，则抛出错误
}
return `${key}${suffix}`; // 返回将后缀添加到key后面的结果
};
} else {
mergeKey = function (key) {
if (typeof key !== "string") {
throw new Error("key 必须是字符串！！"); // 如果key不是字符串，则抛出错误
}
return key; // 返回原始的key值
};
}
return mergeKey(key); // 调用合并函数，返回最终的存储键
},
localStorage：localStorage操作对象
/**
* @namespace localStorage
* @description 提供操作浏览器 localStorage 的方法
*/
localStorage: {
/**
* @method localStorage.set
* @description 设置 localStorage 中的数据
* @param {string} key 存储的键名
* @param {string|object} value 存储的值（可以是字符串或对象）
* @param {boolean} [manage=false] 是否增加管理(统一清除)
* @returns {boolean} 是否设置成功
* @example
* localStorage.set('username', 'John');
* localStorage.set('userInfo', { name: 'John', age: 25 }, true);
*/
set: function (key, value, manage = false) {
if (!zhongjyuan.helper.isString(key) || key === "" || zhongjyuan.helper.isNullOrUndefined(value)) {
zhongjyuan.logger.warn("[helper] localStorage.set 参数错误：key不能为空或者value不能为undefined/null");
return false;
}
if (typeof value === "object") {
value = JSON.stringify(value);
}
try {
window.localStorage.setItem(zhongjyuan.helper.storageKey(key), value);
manage && zhongjyuan.storageManage["localStorage"].set(key);
} catch (err) {
console.log(`localStorage 存储异常：${err}`);
return false;
}
return true;
},
/**
* @method localStorage.get
* @description 获取 localStorage 中存储的数据
* @param {string} key 要获取的键名
* @param {*} [defaultValue=null] 默认值（可选）
* @returns {string|null} 存储的值，如果不存在则返回默认值
* @example
* const username = localStorage.get('username');
* const userInfo = localStorage.get('userInfo', null);
*/
get: function (key, defaultValue) {
defaultValue = arguments.length === 2 ? defaultValue : null;
if (!zhongjyuan.helper.isString(key) || key === "") {
arguments.length < 2 && zhongjyuan.logger.warn("[helper] localStorage.get 参数错误：key必须为字符串，且不能为空");
return defaultValue;
}
const val = window.localStorage.getItem(zhongjyuan.helper.storageKey(key));
if (!zhongjyuan.helper.isNull(val)) {
return val;
}
return defaultValue;
},
/**
* @method localStorage.remove
* @description 移除 localStorage 中指定的数据
* @param {string} key 要移除的键名
* @returns {boolean} 是否删除成功
* @example
* localStorage.remove('username');
*/
remove: function (key) {
if (!zhongjyuan.helper.isString(key) || key === "") {
zhongjyuan.logger.warn("[helper] localStorage.remove 参数错误：key不能为空");
return false;
}
window.localStorage.removeItem(zhongjyuan.helper.storageKey(key));
return true;
},
/**
* @method localStorage.clear
* @description 清空整个 localStorage 中的所有数据
* @example
* localStorage.clear();
*/
clear: function () {
window.localStorage.clear();
},
},
sessionStorage：sessionStorage操作对象
/**
* @namespace sessionStorage
* @description 提供操作浏览器 sessionStorage 的方法
*/
sessionStorage: {
/**
* 存储数据到sessionStorage中
*
* @method sessionStorage.set
* @param {string} key 键名
* @param {string|object} value 值
* @param {boolean} [manage=false] 是否增加管理(统一清除)
* @return {boolean} 表示是否设置成功
*
* @example
* sessionStorage.set('username', 'John');
* sessionStorage.set('userInfo', { name: 'John', age: 28 }, true);
*/
set: function (key, value, manage = false) {
if (!zhongjyuan.helper.isString(key) || key === "" || zhongjyuan.helper.isNullOrUndefined(value)) {
zhongjyuan.logger.warn("[helper] sessionStorage.set 参数错误：key不能为空或者value不能为undefined/null");
return false;
}
if (typeof value === "object") {
value = JSON.stringify(value);
}
try {
window.sessionStorage.setItem(zhongjyuan.helper.storageKey(key), value);
manage && zhongjyuan.storageManage["sessionStorage"].set(key);
} catch (err) {
console.log(`sessionStorage 存储异常：${err}`);
return false;
}
return true;
},
/**
* 从sessionStorage中获取指定键的值
*
* @method sessionStorage.get
* @param {string} key 键名
* @param {*} [defaultValue=null] 默认值（可选）
* @return {string|null} 键对应的值，如果键不存在则返回默认值或null
*
* @example
* const username = sessionStorage.get('username');
* const userInfo = sessionStorage.get('userInfo', { name: 'Guest' });
*/
get: function (key, defaultValue) {
defaultValue = arguments.length === 2 ? defaultValue : null;
if (!zhongjyuan.helper.isString(key) || key === "") {
arguments.length < 2 && zhongjyuan.logger.warn("[helper] sessionStorage.get 参数错误：key必须为字符串，且不能为空");
return defaultValue;
}
const val = window.sessionStorage.getItem(zhongjyuan.helper.storageKey(key));
if (!zhongjyuan.helper.isNull(val)) {
return val;
}
return defaultValue;
},
/**
* 从sessionStorage中移除指定的键值对
*
* @method sessionStorage.remove
* @param {string} key 键名
* @return {boolean} 是否删除成功
*
* @example
* sessionStorage.remove('username');
*/
remove: function (key) {
if (!zhongjyuan.helper.isString(key) || key === "") {
zhongjyuan.logger.warn("[helper] sessionStorage.remove 参数错误：key不能为空");
return false;
}
window.sessionStorage.removeItem(zhongjyuan.helper.storageKey(key));
return true;
},
/**
* 清空sessionStorage中所有的键值对
*
* @method sessionStorage.clear
*
* @example
* sessionStorage.clear();
*/
clear: function () {
window.sessionStorage.clear();
},
},
cookie：cookie操作对象
/**
* @namespace cookie
* @description 提供操作浏览器 cookie 的方法
*/
cookie: {
/**
* @method cookie.set
* @desc 设置Cookie
* @param {string} key 键名
* @param {string|number|boolean} value 值
* @param {number} expiredays 过期时间（天数）
* @param {boolean} [noStoreKey=false] 是否不设置存储键（可选，默认为false）
* @returns {boolean} 表示是否设置成功
* @example
* // 设置名为"username"的Cookie，值为"zhongjyuan"，过期时间为7天
* var success = helper.cookie.set('username', 'zhongjyuan', 7);
*/
set: function (key, value, expiredays, noStoreKey) {
var date;
if (!zhongjyuan.helper.isString(key) || key === "" || zhongjyuan.helper.isNullOrUndefined(value)) {
zhongjyuan.logger.warn("[helper] cookie.set 参数错误：key不能为空或者value不能为undefined/null");
return false;
}
if (zhongjyuan.helper.isInt(expiredays)) {
date = new Date();
date.setDate(date.getDate() + expiredays);
}
document.cookie =
(noStoreKey ? key : zhongjyuan.helper.storageKey(key)) +
"=" +
escape(value) +
(!date ? "" : ";expires=" + date.toGMTString()) +
(zhongjyuan.config.cookie.useMainDomain ? ";domain=" + zhongjyuan.helper.getDomain() : "") +
";path=/;SameSite=" +
zhongjyuan.config.cookie.sameSite +
(zhongjyuan.config.cookie.secure ? ";Secure" : "");
return true;
},
/**
* @method cookie.get
* @desc 获取Cookie的值
* @param {string} key 键名
* @param {*} [defaultValue=null] 默认值（可选，默认为null）
* @param {boolean} [noStoreKey=false] 否不检索存储键（可选，默认为false）
* @returns {string|null} Cookie的值，如果未找到则返回默认值
* @example
* // 获取名为"username"的Cookie的值，如果不存在则返回"default"
* var username = helper.cookie.get('username', 'default');
*/
get: function (key, defaultValue, noStoreKey) {
defaultValue = arguments.length === 2 ? defaultValue : null;
if (!zhongjyuan.helper.isString(key) || key === "") {
zhongjyuan.logger.warn("[helper] cookie.get 参数错误：key不能为空");
return defaultValue;
}
var arr = document.cookie.match(new RegExp("(^| )" + (noStoreKey ? key : zhongjyuan.helper.storageKey(key)) + "=([^;]*)(;|$)"));
if (zhongjyuan.helper.isArray(arr)) {
return unescape(arr[2]);
}
return defaultValue;
},
/**
* @method cookie.remove
* @desc 移除Cookie
* @param {string} key 键名
* @param {boolean} [noStoreKey] 是否不移除存储的键，默认为false
* @returns {boolean} 是否成功移除了Cookie
* @example
* helper.cookie.remove('username');
*/
remove: function (key, noStoreKey) {
return zhongjyuan.helper.cookie.set(key, "", -1000, noStoreKey);
},
},
本文由 mdnice 多平台发布
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
