微信小程序開發(fā) 教案 6.4 教案-數(shù)據(jù)緩存

1、第6章小程序API任務6.4數(shù)據(jù)緩存課時內(nèi)容文件操作課時4教學目標掌握 API 函數(shù) wx.setStorage(Object object)的使用方法；掌握 API 函數(shù) wx.setStorageSync(string key,any data)的使用方法； 掌握 API 函數(shù) wx.getStorage(Object object)的使用方法； 掌握 API 函數(shù) any wx.getStorageSync(string key)的使用方法； 掌握 API 函數(shù) wx.getStoragelnfo(Object object)的使用方法； 掌握 API 函數(shù) Object wx.getS

2、toragelnfoSync()的使用方法； 掌握 API 函數(shù) wx.removeStorage(Object object)的使用方法； 掌握 API 函數(shù) wx.removeStorageSync(string key)的使用方法; 掌握 API 函數(shù) wx.clearStorage(Object object)的使用方法； 掌握API函數(shù)wx.clearStorageSync。的使用方法。教學重難點函數(shù)wx.setStorage(Object object)將數(shù)據(jù)存儲在本地緩存指定的key中； 函數(shù) wx.setStorage 的同步版本 wx.setStorageSync(strin

3、g key,any data)； 函數(shù)wx.getStorage(Object object)從本地緩存中異步獲取指定key的內(nèi)容； 函數(shù) wx.getStorage 的同步版本 any wx.getStorageSync(string key)； 函數(shù)wx.getStoragelnfo(Object object)異步獲取當前storage的相關(guān)信息； 函數(shù) wx.getStoragelnfo 的同步版本 Object wx.getStoragelnfoSync()； 函數(shù)wx.removeStorage(Object object)從本地緩存中移除指定key對應的數(shù)據(jù)； 函數(shù) wx.rem

4、oveStorage 的同步版本 wx.removeStorageSync(string key)； 函數(shù)wx.clearStorage(Object object)清理本地數(shù)據(jù)緩存； 函數(shù) wx.clearStorage 的同步版本 wx.clearStorageSync()o教學設計.教學思路:介紹 API 函數(shù) wx.setStorage(Object object) wx.setStorageSync(string key,any data) 數(shù) wx.getStorage(Object object) any wx.getStorageSync(string key) wx.getS

5、toragelnfo(Object object) 、Object wx.getStoragelnfoSync() 、wx.removeStorage(Object object) 、 wx.removeStorageSync(string key) 、 wx.clearStorage(Object object)和 wx.clearStorageSync。的使用方法的實現(xiàn)；通過小程序 實戰(zhàn)鞏固基礎(chǔ)知識。.教學手段：多媒體+計算機.教學資料：教材、多媒體課件教學內(nèi)容一、任務描述設計一個小程序，利用數(shù)據(jù)緩存API接口函數(shù)實現(xiàn)對數(shù)據(jù)緩存的操作，包括同步和異步緩存數(shù)據(jù)、 獲取緩存數(shù)據(jù)、獲取緩存數(shù)據(jù)信

6、息、刪除緩存數(shù)據(jù)等操作。二、導入新知1 .與數(shù)據(jù)緩存有關(guān)的API函數(shù)用于將文件保存到本地，其參數(shù)屬性如表所示。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.removeStorageSyn

7、c(string key) wx.clearStorage(Object object) wx.clearStorageSyncQ將數(shù)據(jù)存儲在本地緩存指定的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 obje

8、ct) wx.removeStorageSync(string key) wx.clearStorage(Object object) wx.clearStorageSyncQ將數(shù)據(jù)存儲在本地緩存指定的key中 函數(shù)wx.setStoage的同步版本 從本地緩存中異步獲取指定key的內(nèi)容 函數(shù)wx.getStorage的同步版本 異步獲取當前storage的相關(guān)信息 函數(shù)wx.getStoragelnfo的同步版本 從本地緩存中移除指定key對應的數(shù)據(jù) 函數(shù)wx.emoveStoage的同步版本 清理本地數(shù)據(jù)緩存 函數(shù)wx.clearStoage的同步版本三、實現(xiàn)效果根據(jù)任務描述，可以設計如圖

9、6.11所示運行效果的小程序。初始界面如圖(a)所示，此 時沒有操作信息。當點擊“異步存儲數(shù)據(jù)”按鈕時,如圖(b)所示，在信息欄中顯示“異步存儲數(shù)據(jù)成功！”的信息;當點擊“異步存儲數(shù)據(jù)”按鈕時,(2)當點擊“同步存儲數(shù)據(jù)”按鈕時,(2)當點擊“同步存儲數(shù)據(jù)”按鈕時,如圖所示，在信息欄中顯示“同步存儲數(shù)據(jù)成功！”的信息;當點擊“異步獲取數(shù)據(jù)”按鈕時,當點擊“異步獲取數(shù)據(jù)”按鈕時,當點擊“異步獲取數(shù)據(jù)”按鈕時,如圖(d)所示，在信息欄中顯示第1個學生的信息;當點擊“異步獲取數(shù)據(jù)”按鈕時,如圖(d)所示，在信息欄中顯示第1個學生的信息;(4)當點擊“同步獲取數(shù)據(jù)”按鈕時,如圖(e)所示，在信息欄中顯

10、示第2個學生的信息;當點擊“異步緩存信息”按鈕時,如圖所示，在信息欄中顯示異步獲取的緩存信息;當點擊“同步緩存信息、”按鈕時,如圖(g)所示，在信息欄中顯示同步獲取的緩存信息;當點擊“異步刪除數(shù)據(jù)”按鈕時，如圖(h)所示，在信息欄中顯示“異步刪除緩存數(shù)據(jù)成功！” 的信息;當點擊“同步緩存信息、”按鈕時,(8)當點擊“同步刪除數(shù)據(jù)”按鈕時，如圖所示，在信息欄中顯示“同步刪除緩存數(shù)據(jù)成功！”的信息;l.U2.境與搭作DOfSC：!勢 u3A3Mlw*2辱ytfc TOWssai k： 1/tL: n2虛存勒乍S： iI024C9仔募作女”nwtua e諾筑器向斐G Wxml輸出Console終端M

11、emory AppDataAuditsSensorStorageTrace7 X諾筑器向斐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, Limit

12、size: 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

13、:ok)index,is:10610240 Oindex.is:1260: (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:2ind