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;
    }
  }
}

感谢作者dgflash的分享，作者CSDN博客： dgflash CSDN

最后，祝大家学习和生活愉快!