在微信小程序API中，有一个setStorageSync接口，该接口可以将数据存储在本地缓存中指定的key中。如果你重新调用该接口，将会覆盖原来该key对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个key允许存储的最大数据长度为1MB，所有数据存储上限为10MB。

根据文档中的描述，我们可以在小程序中存储我们的业务数据。根据文档，我们可知，value值支持原生类型、Date、以及能够通过JSON.stringify序列化的对象。注意的事项，storage应只用来进行数据的持久化存储，不应用于运行时的数据传递或全局状态管理。启动过程中过多的同步读写存储，会显著影响启动耗时。

我们有一个业务需求，自定义大转盘的内容，大转盘有9个格子，其中中间的格子是功能格子，可以启动转盘，剩下的8个格子可以显示数字、文字。我们需要自定义这8个格子上的内容，来满足用户的自定义需求。如下图：

经过分析，我们应该可以将需求分解如下：

1，需定义一个对象来存储格子内容、格子颜色、及格子旋转时颜色。

2，这些内容应该可以单独存储，即用户相互隔离，互不影响。

3，在小程序启动时，可以加载这些数据，并应用到图形进行显示。

实现上面的需求，我们就要用到上面提到的storage接口。它很好的满足了我们的需求。我们将定义的对象序列化为JSON数据，然后使用setStorage接口将JSON数据存储到缓存中。当小程序启动时，从缓存中加载我们的JSON数据，再反序列化为对象，应用到我们的图形显示中。

在九宫格界面中，我们添加了一个设置按钮，这个按钮是自定义设置入口，当用户想要自定义配置九宫格内容时，点击按钮，将打开配置页面，配置页面中包含方块的颜色、文字内容表单，界面如下：

填写好参数时，保存配置，系统会将我们填写的表单内容转换成JSON数据，然后调用缓存接口保存到用户的缓存，当小程序下次启动时，将会调用新的配置。

缓存的具体用法如下：

1，将配置存储到缓存中

 let boxConfig = {
      isCustom: false,
      blockBgColor: '#F5F5F5',
      blockLabelColor: '#808080',
      blockLabels: '1号|2号|3号|4号|5号|6号|7号|源码',
      startBtnBgColor: '#FFD700',
      startBtnLabelColor: '#808080',
      turnBgColor: '#FFA500',
    };
 let jsonBoxConfig = JSON.stringify(boxConfig);
    wx.setStorageSync("boxConfig", jsonBoxConfig);
    that.setData({
      tips: '请重新打开小程序，查看九宫格大转盘效果',
    })

2，从缓存中加载配置

 const boxConfigJson = wx.getStorageSync("boxConfig");
    if(!isEmpty(boxConfigJson)){
      const boxConfig = JSON.parse(boxConfigJson);
      const boxLabels = boxConfig.blockLabels;
      const boxLabelArr = str2arr2(boxLabels);
      this.setData({
        isCustom:boxConfig.isCustom,
        blockBgColor:boxConfig.blockBgColor,
        blockLabelColor:boxConfig.blockLabelColor,
        blockLabels:boxLabelArr,
        startBtnBgColor:boxConfig.startBtnBgColor,
        startBtnLabelColor:boxConfig.startBtnLabelColor,
        turnBgColor:boxConfig.turnBgColor,
      })
    }	

如果你有疑问或者建议，欢迎你评论！