很多人在用 localStorage 或 sessionStorage 的时候喜欢直接用，明文存储，直接将信息暴露在；浏览器中，虽然一般场景下都能应付得了且简单粗暴，但特殊需求情况下，比如设置定时功能，就不能实现。就需要对其进行二次封装，为了在使用上增加些安全感，那加密也必然是少不了的了。为方便项目使用，特对常规操作进行封装。不完善之处会进一步更新...(更新于：2022.06.02 16:30)
封装之前先梳理下所需功能，并要做成什么样，采用什么样的规范，部分主要代码片段是以 localStorage作为示例，最后会贴出完整代码的。可以结合项目自行优化，也可以直接使用。
// 区分存储类型 type
// 自定义名称前缀 prefix
// 支持设置过期时间 expire
// 支持加密可选，开发环境下未方便调试可关闭加密
// 支持数据加密 这里采用 crypto-js 加密 也可使用其他方式
// 判断是否支持 Storage isSupportStorage
// 设置 setStorage
// 获取 getStorage
// 是否存在 hasStorage
// 获取所有key getStorageKeys
// 根据索引获取key getStorageForIndex
// 获取localStorage长度 getStorageLength
// 获取全部 getAllStorage
// 删除 removeStorage
// 清空 clearStorage
//定义参数 类型 window.localStorage,window.sessionStorage,
const config = {
type: 'localStorage', // 本地存储类型 localStorage/sessionStorage
prefix: 'SDF_0.0.1', // 名称前缀 建议：项目名 + 项目版本
expire: 1, //过期时间 单位：秒
isEncrypt: true // 默认加密 为了调试方便, 开发过程中可以不加密
}
复制代码Storage 本身是不支持过期时间设置的，要支持设置过期时间，可以效仿 Cookie 的做法，setStorage(key,value,expire) 方法，接收三个参数，第三个参数就是设置过期时间的，用相对时间，单位秒，要对所传参数进行类型检查。可以设置统一的过期时间，也可以对单个值得过期时间进行单独配置。两种方式按需配置。
代码实现：
// 设置 setStorage
export const setStorage = (key,value,expire=0) => {
if (value === '' || value === null || value === undefined) {
value = null;
}
if (isNaN(expire) || expire < 1) throw new Error("Expire must be a number");
expire = (expire?expire:config.expire) * 60000;
let data = {
value: value, // 存储值
time: Date.now(), //存值时间戳
expire: expire // 过期时间
}
window[config.type].setItem(key, JSON.stringify(data));
}首先要对 key 是否存在进行判断，防止获取不存在的值而报错。对获取方法进一步扩展，只要在有效期内获取 Storage 值，就对过期时间进行续期，如果过期则直接删除该值。并返回 null
// 获取 getStorage
export const getStorage = (key) => {
// key 不存在判断
if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null'){
return null;
}
// 优化 持续使用中续期
const storage = JSON.parse(window[config.type].getItem(key));
console.log(storage)
let nowTime = Date.now();
console.log(config.expire*6000 ,(nowTime - storage.time))
// 过期删除
if (storage.expire && config.expire*6000 < (nowTime - storage.time)) {
removeStorage(key);
return null;
} else {
// 未过期期间被调用 则自动续期 进行保活
setStorage(key,storage.value);
return storage.value;
}
}
复制代码// 获取全部 getAllStorage
export const getAllStorage = () => {
let len = window[config.type].length // 获取长度
let arr = new Array() // 定义数据集
for (let i = 0; i < len; i++) {
// 获取key 索引从0开始
let getKey = window[config.type].key(i)
// 获取key对应的值
let getVal = window[config.type].getItem(getKey)
// 放进数组
arr[i] = { 'key': getKey, 'val': getVal, }
}
return arr
}
复制代码// 名称前自动添加前缀
const autoAddPrefix = (key) => {
const prefix = config.prefix ? config.prefix + '_' : '';
return prefix + key;
}
// 删除 removeStorage
export const removeStorage = (key) => {
window[config.type].removeItem(autoAddPrefix(key));
}
复制代码// 清空 clearStorage
export const clearStorage = () => {
window[config.type].clear();
}
复制代码加密采用的是 crypto-js
// 安装crypto-js
npm install crypto-js
// 引入 crypto-js 有以下两种方式
import CryptoJS from "crypto-js";
// 或者
const CryptoJS = require("crypto-js");
复制代码对 crypto-js 设置密钥和密钥偏移量,可以采用将一个私钥经 MD5 加密生成16位密钥获得。
// 十六位十六进制数作为密钥
const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161");
// 十六位十六进制数作为密钥偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");
复制代码对加密方法进行封装
/**
* 加密方法
* @param data
* @returns {string}
*/
export function encrypt(data) {
if (typeof data === "object") {
try {
data = JSON.stringify(data);
} catch (error) {
console.log("encrypt error:", error);
}
}
const dataHex = CryptoJS.enc.Utf8.parse(data);
const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.ciphertext.toString();
}
复制代码对解密方法进行封装
/**
* 解密方法
* @param data
* @returns {string}
*/
export function decrypt(data) {
const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
复制代码在存储数据及获取数据中进行使用：
这里我们主要看下进行加密和解密部分，部分方法在下面代码段中并未展示，请注意，不能直接运行。
const config = {
type: 'localStorage', // 本地存储类型 sessionStorage
prefix: 'SDF_0.0.1', // 名称前缀 建议：项目名 + 项目版本
expire: 1, //过期时间 单位：秒
isEncrypt: true // 默认加密 为了调试方便, 开发过程中可以不加密
}
// 设置 setStorage
export const setStorage = (key, value, expire = 0) => {
if (value === '' || value === null || value === undefined) {
value = null;
}
if (isNaN(expire) || expire < 0) throw new Error("Expire must be a number");
expire = (expire ? expire : config.expire) * 1000;
let data = {
value: value, // 存储值
time: Date.now(), //存值时间戳
expire: expire // 过期时间
}
// 对存储数据进行加密 加密为可选配置
const encryptString = config.isEncrypt ? encrypt(JSON.stringify(data)): JSON.stringify(data);
window[config.type].setItem(autoAddPrefix(key), encryptString);
}
// 获取 getStorage
export const getStorage = (key) => {
key = autoAddPrefix(key);
// key 不存在判断
if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null') {
return null;
}
// 对存储数据进行解密
const storage = config.isEncrypt ? JSON.parse(decrypt(window[config.type].getItem(key))) : JSON.parse(window[config.type].getItem(key));
let nowTime = Date.now();
// 过期删除
if (storage.expire && config.expire * 6000 < (nowTime - storage.time)) {
removeStorage(key);
return null;
} else {
// 持续使用时会自动续期
setStorage(autoRemovePrefix(key), storage.value);
return storage.value;
}
}
复制代码使用的时候你可以通过 import 按需引入，也可以挂载到全局上使用，一般建议少用全局方式或全局变量，为后来接手项目继续开发维护的人，追查代码留条便捷之路！不要为了封装而封装，尽可能基于项目需求和后续的通用，以及使用上的便捷。比如获取全部存储变量，如果你项目上都未曾用到过，倒不如删减掉，留着过年也不见得有多香，不如为减小体积做点贡献！
import {isSupportStorage, hasStorage, setStorage,getStorage,getStorageKeys,getStorageForIndex,getStorageLength,removeStorage,getStorageAll,clearStorage} from '@/utils/storage'
复制代码该代码已进一步完善，需要的可以直接进一步优化，也可以将可优化或可扩展的建议，留言说明，我会进一步迭代的。可以根据自己的需要删除一些不用的方法，以减小文件大小。
/***
* title: storage.js
* Author: Gaby
* Email: xxx@126.com
* Time: 2022/6/1 17:30
* last: 2022/6/2 17:30
* Desc: 对存储的简单封装
*/
import CryptoJS from 'crypto-js';
// 十六位十六进制数作为密钥
const SECRET_KEY = CryptoJS.enc.Utf8.parse("3333e6e143439161");
// 十六位十六进制数作为密钥偏移量
const SECRET_IV = CryptoJS.enc.Utf8.parse("e3bbe7e3ba84431a");
// 类型 window.localStorage,window.sessionStorage,
const config = {
type: 'localStorage', // 本地存储类型 sessionStorage
prefix: 'SDF_0.0.1', // 名称前缀 建议：项目名 + 项目版本
expire: 1, //过期时间 单位：秒
isEncrypt: true // 默认加密 为了调试方便, 开发过程中可以不加密
}
// 判断是否支持 Storage
export const isSupportStorage = () => {
return (typeof (Storage) !== "undefined") ? true : false
}
// 设置 setStorage
export const setStorage = (key, value, expire = 0) => {
if (value === '' || value === null || value === undefined) {
value = null;
}
if (isNaN(expire) || expire < 0) throw new Error("Expire must be a number");
expire = (expire ? expire : config.expire) * 1000;
let data = {
value: value, // 存储值
time: Date.now(), //存值时间戳
expire: expire // 过期时间
}
const encryptString = config.isEncrypt
? encrypt(JSON.stringify(data))
: JSON.stringify(data);
window[config.type].setItem(autoAddPrefix(key), encryptString);
}
// 获取 getStorage
export const getStorage = (key) => {
key = autoAddPrefix(key);
// key 不存在判断
if (!window[config.type].getItem(key) || JSON.stringify(window[config.type].getItem(key)) === 'null') {
return null;
}
// 优化 持续使用中续期
const storage = config.isEncrypt
? JSON.parse(decrypt(window[config.type].getItem(key)))
: JSON.parse(window[config.type].getItem(key));
let nowTime = Date.now();
// 过期删除
if (storage.expire && config.expire * 6000 < (nowTime - storage.time)) {
removeStorage(key);
return null;
} else {
// 未过期期间被调用 则自动续期 进行保活
setStorage(autoRemovePrefix(key), storage.value);
return storage.value;
}
}
// 是否存在 hasStorage
export const hasStorage = (key) => {
key = autoAddPrefix(key);
let arr = getStorageAll().filter((item)=>{
return item.key === key;
})
return arr.length ? true : false;
}
// 获取所有key
export const getStorageKeys = () => {
let items = getStorageAll()
let keys = []
for (let index = 0; index < items.length; index++) {
keys.push(items[index].key)
}
return keys
}
// 根据索引获取key
export const getStorageForIndex = (index) => {
return window[config.type].key(index)
}
// 获取localStorage长度
export const getStorageLength = () => {
return window[config.type].length
}
// 获取全部 getAllStorage
export const getStorageAll = () => {
let len = window[config.type].length // 获取长度
let arr = new Array() // 定义数据集
for (let i = 0; i < len; i++) {
// 获取key 索引从0开始
let getKey = window[config.type].key(i)
// 获取key对应的值
let getVal = window[config.type].getItem(getKey)
// 放进数组
arr[i] = {'key': getKey, 'val': getVal,}
}
return arr
}
// 删除 removeStorage
export const removeStorage = (key) => {
window[config.type].removeItem(autoAddPrefix(key));
}
// 清空 clearStorage
export const clearStorage = () => {
window[config.type].clear();
}
// 名称前自动添加前缀
const autoAddPrefix = (key) => {
const prefix = config.prefix ? config.prefix + '_' : '';
return prefix + key;
}
// 移除已添加的前缀
const autoRemovePrefix = (key) => {
const len = config.prefix ? config.prefix.length+1 : '';
return key.substr(len)
// const prefix = config.prefix ? config.prefix + '_' : '';
// return prefix + key;
}
/**
* 加密方法
* @param data
* @returns {string}
*/
const encrypt = (data) => {
if (typeof data === "object") {
try {
data = JSON.stringify(data);
} catch (error) {
console.log("encrypt error:", error);
}
}
const dataHex = CryptoJS.enc.Utf8.parse(data);
const encrypted = CryptoJS.AES.encrypt(dataHex, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.ciphertext.toString();
}
/**
* 解密方法
* @param data
* @returns {string}
*/
const decrypt = (data) => {
const encryptedHexStr = CryptoJS.enc.Hex.parse(data);
const str = CryptoJS.enc.Base64.stringify(encryptedHexStr);
const decrypt = CryptoJS.AES.decrypt(str, SECRET_KEY, {
iv: SECRET_IV,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
const decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
}
复制代码本文由哈喽比特于2年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/q_15Ls-pEYHDf4nZL-U5Gg
京东创始人刘强东和其妻子章泽天最近成为了互联网舆论关注的焦点。有关他们“移民美国”和在美国购买豪宅的传言在互联网上广泛传播。然而，京东官方通过微博发言人发布的消息澄清了这些传言，称这些言论纯属虚假信息和蓄意捏造。
日前，据博主“@超能数码君老周”爆料，国内三大运营商中国移动、中国电信和中国联通预计将集体采购百万台规模的华为Mate60系列手机。
据报道，荷兰半导体设备公司ASML正看到美国对华遏制政策的负面影响。阿斯麦（ASML）CEO彼得·温宁克在一档电视节目中分享了他对中国大陆问题以及该公司面临的出口管制和保护主义的看法。彼得曾在多个场合表达了他对出口管制以及中荷经济关系的担忧。
今年早些时候，抖音悄然上线了一款名为“青桃”的 App，Slogan 为“看见你的热爱”，根据应用介绍可知，“青桃”是一个属于年轻人的兴趣知识视频平台，由抖音官方出品的中长视频关联版本，整体风格有些类似B站。
日前，威马汽车首席数据官梅松林转发了一份“世界各国地区拥车率排行榜”，同时，他发文表示：中国汽车普及率低于非洲国家尼日利亚，每百户家庭仅17户有车。意大利世界排名第一，每十户中九户有车。
近日，一项新的研究发现，维生素 C 和 E 等抗氧化剂会激活一种机制，刺激癌症肿瘤中新血管的生长，帮助它们生长和扩散。
据媒体援引消息人士报道，苹果公司正在测试使用3D打印技术来生产其智能手表的钢质底盘。消息传出后，3D系统一度大涨超10%，不过截至周三收盘，该股涨幅回落至2%以内。
9月2日，坐拥千万粉丝的网红主播“秀才”账号被封禁，在社交媒体平台上引发热议。平台相关负责人表示，“秀才”账号违反平台相关规定，已封禁。据知情人士透露，秀才近期被举报存在违法行为，这可能是他被封禁的部分原因。据悉，“秀才”年龄39岁，是安徽省亳州市蒙城县人，抖音网红，粉丝数量超1200万。他曾被称为“中老年...
9月3日消息，亚马逊的一些股东，包括持有该公司股票的一家养老基金，日前对亚马逊、其创始人贝索斯和其董事会提起诉讼，指控他们在为 Project Kuiper 卫星星座项目购买发射服务时“违反了信义义务”。
据消息，为推广自家应用，苹果现推出了一个名为“Apps by Apple”的网站，展示了苹果为旗下产品（如 iPhone、iPad、Apple Watch、Mac 和 Apple TV）开发的各种应用程序。
特斯拉本周在美国大幅下调Model S和X售价，引发了该公司一些最坚定支持者的不满。知名特斯拉多头、未来基金（Future Fund）管理合伙人加里·布莱克发帖称，降价是一种“短期麻醉剂”，会让潜在客户等待进一步降价。
据外媒9月2日报道，荷兰半导体设备制造商阿斯麦称，尽管荷兰政府颁布的半导体设备出口管制新规9月正式生效，但该公司已获得在2023年底以前向中国运送受限制芯片制造机器的许可。
近日，根据美国证券交易委员会的文件显示，苹果卫星服务提供商 Globalstar 近期向马斯克旗下的 SpaceX 支付 6400 万美元（约 4.65 亿元人民币）。用于在 2023-2025 年期间，发射卫星，进一步扩展苹果 iPhone 系列的 SOS 卫星服务。
据报道，马斯克旗下社交平台𝕏（推特）日前调整了隐私政策，允许 𝕏 使用用户发布的信息来训练其人工智能（AI）模型。新的隐私政策将于 9 月 29 日生效。新政策规定，𝕏可能会使用所收集到的平台信息和公开可用的信息，来帮助训练 𝕏 的机器学习或人工智能模型。
9月2日，荣耀CEO赵明在采访中谈及华为手机回归时表示，替老同事们高兴，觉得手机行业，由于华为的回归，让竞争充满了更多的可能性和更多的魅力，对行业来说也是件好事。
《自然》30日发表的一篇论文报道了一个名为Swift的人工智能（AI）系统，该系统驾驶无人机的能力可在真实世界中一对一冠军赛里战胜人类对手。
近日，非营利组织纽约真菌学会（NYMS）发出警告，表示亚马逊为代表的电商平台上，充斥着各种AI生成的蘑菇觅食科普书籍，其中存在诸多错误。
社交媒体平台𝕏（原推特）新隐私政策提到：“在您同意的情况下，我们可能出于安全、安保和身份识别目的收集和使用您的生物识别信息。”
2023年德国柏林消费电子展上，各大企业都带来了最新的理念和产品，而高端化、本土化的中国产品正在不断吸引欧洲等国际市场的目光。
罗永浩日前在直播中吐槽苹果即将推出的 iPhone 新品，具体内容为：“以我对我‘子公司’的了解，我认为 iPhone 15 跟 iPhone 14 不会有什么区别的，除了序（列）号变了，这个‘不要脸’的东西，这个‘臭厨子’。
