oops-framework框架之本地存储(五)

本文主要是介绍oops-framework框架之本地存储(五)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-game-kit

注：作者dgflash的oops-framework框架QQ群： 628575875

简介

在CocosCreator中，本地存储主要使用sys.localStorage 接口，通过 key-value的格式进行存储。

主要接口有：

接口	描述
setItem(key, value)	保存指定索引的数据
getItem(key)	获取指定索引的数据
removeItem(key)	移除指定索引的数据
clear()	清空所有数据

存储的最后数据是以sqlite数据库格式存储的。

dgflash作者分享的 oops-framework 框架是在此基础上进行的二次封装，有着如下的特点：

设置用户ID，将key和用户ID组合，避免存储数据被覆盖
增加了MD5、AES的第三方库加密，key使用MD5加密， value使用AES加密，增加的数据的安全性
在模拟器或浏览器的调试下，不会触发数据加密，方便明文调试

针对于本地存储的使用，主要有两个类：

StorageManager 本地存储的管理类
EncryptUtil NPM第三方加密库的封装类

针对于后者，需要NPM的支持安装第三方库crypto-es，在opps-framework的框架中已经配置。

这里做下简单了解：

NPM crypto-es

终端安装命令：

npm install -g yarn
yarn add crypto-es

主要接口

作者使用dgflash封装的StorageManager主要接口如下：

接口	返回类型	说明
init(key: string, iv: string)	void	初始化密钥
setUser(id: string)	void	初始化用户ID，默认为空
set(key: string, value: any)	void	存储数据
get(key: string, defaultValue: any = “”)	string	获取数据
getNumber(key: string, defaultValue: number = 0)	number	获取number类型数据
getBoolean(key: string)	boolean	获取boolean类型数据
getJson(key: string, defaultValue?: any)	any	获取Json类型数据
remove(key: string)	void	移除指定字段的数据
clear()	void	清空所有数据

注：密钥的初始化在resources/config.json下localDataKey 和 localDataIv 进行设置

我们看下关于set方法的设定：

set(key: string, value: any) {var keywords = `${key}_${this._id}`;// 检测key字段的合法性if (null == key) {console.error("存储的key不能为空");return;}// 检测是否为非调试模式，及非浏览器或模拟器if (!PREVIEW) {keywords = EncryptUtil.md5(keywords);}// 检测value字段的合法性if (null == value) {console.warn("存储的值为空，则直接移除该存储");this.remove(key);return;}if (typeof value === 'function') {console.error("储存的值不能为方法");return;}// 对value字段数据进行转换if (typeof value === 'object') {try {value = JSON.stringify(value);}catch (e) {console.error(`解析失败，str = ${value}`);return;}}else if (typeof value === 'number') {value = value + "";}// 设置value字段加密if (!PREVIEW && null != this._key && null != this._iv) {value = EncryptUtil.aesEncrypt(`${value}`, this._key, this._iv);}// 存储数据sys.localStorage.setItem(keywords, value);
}

注意： CocosCreator引擎提供的接口: setItem(key: string, value: string) value一定要为string类型，否则会报错。

这里汇总下oops-framework提供的加密库封装主要接口：

接口	说明
initCrypto(key, iv)	初始化加密库的key和iv
md5()	获取md5加密字段
aesEncrypt()	AES加密
aesDecrypt()	获取AES解密数据

注： AES加密和解密的key和iv 使用的是initCrypto初始化中的字段

示例

本地存储的使用，在Oops.ts中提供的入口主要是：

// ../oops-plugin-framework/assets/core/Oop.ts
export class oops {/** 本地存储 */static storage: StorageManager = new StorageManager();
}

建议在项目启动后的某个关键点增加用户ID和加密字段的处理

// 设置用户ID
let userId = "10001";
oops.storage.setUser(uid);
// 设置加密key和vi
// 通过oops.config.game获取resources/config.json中的配置字段
let config = oops.config.game;
let key = config.localDataKey || "key";
let vi = config.localDataIv || "vi";
oops.storage.init("key", "vi");

代码中的使用示例就相对简单了, 以音效为例：

const LOCAL_STORE_KEY = "game_audio";// 保存字段
save() {// 声音音量this.local_data.volume_music = this._volume_music;// 音效音量this.local_data.volume_effect = this._volume_effect;// 声音开关this.local_data.switch_music = this._switch_music;// 音效开关this.local_data.switch_effect = this._switch_effect;let data = JSON.stringify(this.local_data);oops.storage.set(LOCAL_STORE_KEY, data);
}// 获取字段
load() {let data = oops.storage.get(LOCAL_STORE_KEY);if (data) {try {this.local_data = JSON.parse(data);this._volume_music = this.local_data.volume_music;this._volume_effect = this.local_data.volume_effect;this._switch_music = this.local_data.switch_music;this._switch_effect = this.local_data.switch_effect;}catch (e) {this.local_data = {};this._volume_music = 1;this._volume_effect = 1;this._switch_music = true;this._switch_effect = true;}}
}