《微信小程序开发零基础入门-第2版》教案(含习题) 第08章教案_数据缓存API.doc

《微信小程序开发零基础入门-第2版》教案 第8章 数据缓存API 一、教学目标： 了解小程序本地缓存的概念； 掌握数据存储相关接口的用法； 掌握数据获取相关接口的用法； 掌握存储信息获取相关接口的用法； 掌握数据删除相关接口的用法； 掌握数据清空相关接口的用法。 二、教学重点和难点： 重点：掌握数据存储、获取、删除相关接口的用法； 难点：掌握存储信息获取相关接口的用法。 三、教学方法与手段： 采取互动式教学方法，理论教学使用多媒体投影教室。 四、课程简介： 本章主要介绍小程序数据缓存API的应用，包括数据的存储、获取、删除、清空，以及存储信息的获取。 五、教学基本内容： 本地缓存 为了提高使用便捷性，同一个小程序允许每个用户单独存储10MB以内的数据在本地设备中，这些数据称为小程序的本地缓存。开发者可以通过数据缓存API对本地缓存进行设置、获取和清理工作。小程序的本地缓存是以用户维度来进行隔离，假设有A、B两位用户共用同一台设备，A用户是无法读取到B用户相关数据的，反之亦然。 需要注意的是，小程序的本地缓存仅用于方便用户，如果用户的设备存储空间不足，微信会清空最近最久未使用的本地缓存。因此不建议将关键信息全部存在本地，以免存储空间不足或设备更换。 数据缓存API目前共有5类，包括：数据存储、获取、删除、清空，以及存储信息获取。每一类均分为异步和同步两种函数写法，具体内容如表8-1所示。 表8- SEQ 表4- \* ARABIC 1 数据缓存API相关函数 函数名称 解释 wx.setStorage(OBJECT) 数据存储（异步） wx.setStorageSync(KEY,DATA) 数据存储（同步） wx.getStorage(OBJECT) 数据获取（异步） wx.getStorageSync(KEY) 数据获取（同步） wx.getStorageInfo(OBJECT) 存储信息获取（异步） wx.getStorageInfoSync() 存储信息获取（同步） wx.removeStorage(OBJECT) 数据删除（异步） wx.removeStorageSync(KEY) 数据删除（同步） wx.clearStorage() 数据清空（异步） wx.clearStorageSync() 数据清空（同步） 表中的Sync来源于英文单词synchronization的前4个字母，表示同步的意思。因此数据缓存API中带有Sync字样的函数均为同步函数，否则就是异步函数。 数据存储 异步数据存储 小程序使用异步接口wx.setStorage(OBJECT)将数据存储在本地缓存中指定的 key 中，OBJECT参数说明如表8-2所示。 表8- SEQ 表4- \* ARABIC 2 wx.setStorage(OBJECT)参数一览表 参数 类型 必填 说明 key String 是 本地缓存中指定的key data Object/String 是 需要存储的内容 success Function 否 接口调用成功的回调函数 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功与否都执行） 注：如果指定的key原先已存在，则新数据会覆盖掉原来该 key 对应的内容。 wx.setStorage(OBJECT)示例代码格式如下： wx.setStorage({ key: key, data: value, success:function(){ //存储成功 }, fail:function(){ //存储失败 }, complete:function(){ //存储完成 } }) 其中引号中的key和value可以替换为开发者需要的其他文本内容，且函数success、fail和complete可以省略不写。 【例8- SEQ 例4- \* ARABIC 1】小程序数据缓存API之setStorage的简单应用 本示例在setStorage.wxml中设置了2个input组件分别用于输入KEY和DATA的值，并使用button组件进行数据提交。在setStorage.js的data属性中预设key和data均为空白内容，等待更新；使用自定义函数keyInput和dataInput来获取这两个输入框内的内容，并更新到data属性中；使用自定义函数setStorage获取更新后的key值并进行判断，如果为空则提示用户输入，不为空则调用wx.setStorage函数进行异步存储。 图(a)为页面初始效果；图(b)为未输入KEY名称时的提