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

引擎： CocosCreator 3.8.0

环境： Mac

Gitee: oops-game-kit

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

简介

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

主要接口有：

存储的最后数据是以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主要接口如下：

注： 密钥的初始化在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提供的加密库封装主要接口：

注： 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

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

代码007普通

打赏 收藏 海报 链接