微信小程序开发---教案-6.4-教案-数据缓存.docx

第6章小程序API任务6.4数据缓存课时内容文件操作课时4教学目标掌握 API 函数 wx.setStorage(Object object)的使用方法；掌握 API 函数 wx.setStorageSync(string key,any data)的使用方法； 掌握 API 函数 wx.getStorage(Object object)的使用方法； 掌握 API 函数 any wx.getStorageSync(string key)的使用方法； 掌握 API 函数 wx.getStoragelnfo(Object object)的使用方法； 掌握 API 函数 Object wx.getStoragelnfoSync()的使用方法； 掌握 API 函数 wx.removeStorage(Object object)的使用方法； 掌握 API 函数 wx.removeStorageSync(string key)的使用方法; 掌握 API 函数 wx.clearStorage(Object object)的使用方法； 掌握API函数wx.clearStorageSync。的使用方法。教学重难点函数wx.setStorage(Object object)将数据存储在本地缓存指定的key中； 函数 wx.setStorage 的同步版本 wx.setStorageSync(string key,any data)； 函数wx.getStorage(Object object)从本地缓存中异步获取指定key的内容； 函数 wx.getStorage 的同步版本 any wx.getStorageSync(string key)； 函数wx.getStoragelnfo(Object object)异步获取当前storage的相关信息； 函数 wx.getStoragelnfo 的同步版本 Object wx.getStoragelnfoSync()； 函数wx.removeStorage(Object object)从本地缓存中移除指定key对应的数据； 函数 wx.removeStorage 的同步版本 wx.removeStorageSync(string key)； 函数wx.clearStorage(Object object)清理本地数据缓存； 函数 wx.clearStorage 的同步版本 wx.clearStorageSync()o教学设计1 .教学思路:介绍 API 函数 wx.setStorage(Object object) wx.setStorageSync(string key,any data) 数 wx.getStorage(Object object) any wx.getStorageSync(string key) wx.getStoragelnfo(Object object) 、Object wx.getStoragelnfoSync() 、wx.removeStorage(Object object) 、 wx.removeStorageSync(string key) 、 wx.clearStorage(Object object)和 wx.clearStorageSync。的使用方法的实现；通过小程序 实战巩固基础知识。2 .教学手段：多媒体+计算机3 .教学资料：教材、多媒体课件教学内容一、任务描述设计一个小程序，利用数据缓存API接口函数实现对数据缓存的操作，包括同步和异步缓存数据、 获取缓存数据、获取缓存数据信息、删除缓存数据等操作。二、导入新知1 .与数据缓存有关的API函数用于将文件保存到本地，其参数属性如表所示。wx.setStorage(Object object) wx.setStorageSync(string key,any data) wx.getStorage(Object object) any wx.getStorageSync(string key) wx.getStoragelnfo(Object object) Object wx.getStoragelnfoSyncO wx.removeStorage(Object object) wx.removeStorageSync(string key) wx.clearStorage(Object object) wx.clearStorageSyncQ将数据存储在本地缓存指定的key中 函数wx.setStoage的同步版本 从本地缓存中异步获取指定key的内容 函数wx.getStorage的同步版本 异步获取当前storage的相关信息 函数wx.getStoragelnfo的同步版本 从本地缓存中移除指定key对应的数据 函数wx.emoveStoage的同步版本 清理本地数据缓存 函数wx.clearStoage的同步版本三、实现效果根据任务描述，可以设计如图6.11所示运行效果的小程序。初始界面如图(a)所示，此 时没有操作信息。当点击“异步存储数据”按钮时,如图(b)所示，在信息栏中显示“异步存储数据成功！”的信息;(2)当点击“同步存储数据”按钮时,如图所示，在信息栏中显示“同步存储数据成功！”的信息;当点击“异步获取数据”按钮时,当点击“异步获取数据”按钮时,如图(d)所示，在信息栏中显示第1个学生的信息;(4)当点击“同步获取数据”按钮时,如图(e)所示，在信息栏中显示第2个学生的信息;当点击“异步缓存信息”按钮时,如图所示，在信息栏中显示异步获取的缓存信息;当点击“同步缓存信息、”按钮时,如图(g)所示，在信息栏中显示同步获取的缓存信息;当点击“异步删除数据”按钮时，如图(h)所示，在信息栏中显示“异步删除缓存数据成功！” 的信息;(8)当点击“同步删除数据”按钮时，如图所示，在信息栏中显示“同步删除缓存数据成功！”的信息;l.U2.境与搭作DOfSC：!势 u3A3Mlw*2辱ytfc TOWssai k： 1/tL: n2虚存勒乍S： iI024C9仔募作女”nwtua e诺筑器向斐G Wxml输出Console终端Memory AppDataAuditsSensorStorageTrace7 X1 ： ISources NetworkSecurityMockH 0 top | O | FilterDefault levels 1index.-is：60nv-length:(.) _proto_: Array(0)log appendFile err fs_appendFile:fail no such gl keys: Array(2), currentsize: 1, Limitsize: currentsize: 1errMsg: getStoragelnfo:okkeys: (2)高一“，“高二 limitsize: 10240 _proto_: Object keys: Array(2), currentsize: 1, Limitsize: currentsize: 1keys: (2)高一“，“高二 limitsize: 10240 _proto_: Objectfile or directory, open “http：/usr/miniDrogramLog/1。VM454 WAService.is:210240errMsg: getStoragelnfo:ok)index,is:10610240 Oindex.is:126 (2) R-3 f- O0: (id: 1, name: TOM, Chinese: 95, Math: 87, English: 72)1: (id: 2, name: Kevin, Chinese: 75, Math: 97, English: 79) length: 2 nv_length: (.) _proto_: Array(0)log appendFile err fs_appendFile:fail no such file or directory, open http：/usr7EiniDrograELog/l。 VM454 WAService.is:2index.is:86 g, J o 0: id: 1, name: TOM, Chinese: 95, Math: 87, English: 72) 1: id: 2, name: Kevin, Chinese: 75, Math: 97, English: 79 length: 2四、任务实现(1)编写index.wxml文件代码;(2)编写index.wxss文件代码;(3)编写index.js文件代码。练习