微信小程序开发---教案-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.setSto「age的同步版本 从本地缓存中异步获取指定key的内容 函数wx.getStorage的同步版本 异步获取当前storage的相关信息 函数wx.getStoragelnfo的同步版本 从本地缓存中移除指定key对应的数据 函数wx.「emoveSto「age的同步版本 清理本地数据缓存 函数wx.clearSto「age的同步版本

三、实现效果
根据任务描述，可以设计如图6.11所示运行效果的小程序。初始界面如图(a)所示，此 时没有操作信息。
⑴当点击“异步存储数据”按钮时,
如图(b)所示，在信息栏中显示“异步存储数据成功！”的信息;
(2)当点击“同步存储数据”按钮时,
如图⑹所示，在信息栏中显示“同步存储数据成功！”

的信息;⑶当点击“异步获取数据”按钮时,

⑶当点击“异步获取数据”按钮时,
如图(d)所示，在信息栏中显示第1个学生的信息;
(4)当点击“同步获取数据”按钮时,
如图(e)所示，在信息栏中显示第2个学生的信息;
⑸当点击“异步缓存信息”按钮时,
如图⑴所示，在信息栏中显示异步获取的缓存信息;

⑹当点击“同步缓存信息、”按钮时,
如图(g)所示，在信息栏中显示同步获取的缓存信息;⑺当点击“异步删除数据”按钮时，如图(h)所示，在信息栏中显示“异步删除缓存数据成功！” 的信息;
(8)当点击“同步删除数据”按钮时，如图⑴所示，在信息栏中显示“同步删除缓存数据成功！”的信息;
l€.U2.
境与搭作■DOfSC：!
势 u—3A"
3Mlw*«
2・
辱—y±tfc TOW
ssa^i k
： 1/・tL■: n
2・@虚存勒乍
S—■： iI024C>
9仔募作•女”n
wtua e

诺筑器向斐
G Wxml
输出
Console
终端
Memory AppData
Audits
Sensor
Storage
Trace
7 X
1 ： I
Sources Network
Security
Mock
[H 0 top

▼ | O | Filter

Default levels ▼

1

index.-is：60
nv-length:(...)
► _proto_: Array(0)
log appendFile err fs_appendFile:fail no such gl"
▼ {keys: Array(2), currentsize: 1, Limitsize: currentsize: 1
errMsg: "getStoragelnfo:ok"
►keys: (2)「高一“，“高二"] limitsize: 10240
► _proto_: Object
▼ {keys: Array(2), currentsize: 1, Limitsize: currentsize: 1
►keys: (2)「・高一“，“高二"] limitsize: 10240
► _proto_: Object
file or directory, open “http：//usr/miniDrogramLog/1。VM454 WAService.~is:2
10240errMsg: "getStoragelnfo:ok")
index,~is:106
10240} O
index.is:126
▼ (2) R-3 f-}] 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 nv_length: (...)
► _proto_: Array(0)log appendFile err fs_appendFile:fail no such file or directory, open "http：//usr7EiniDrograELog/l。 VM454 WAService.is:2
index.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文件代码。
练习