- 1、本文档共11页,可阅读全部内容。
- 2、原创力文档(book118)网站文档一经付费(服务费),不意味着购买了该文档的版权,仅供个人/单位学习、研究之用,不得用于商业用途,未经授权,严禁复制、发行、汇编、翻译或者网络传播等,侵权必究。
- 3、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。如您付费,意味着您自己接受本站规则且自行承担风险,本站不退款、不进行额外附加服务;查看《如何避免下载的几个坑》。如果您已付费下载过本站文档,您可以点击 这里二次下载。
- 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等,请点击“版权申诉”(推荐),也可以打举报电话:400-050-0827(电话支持时间:9:00-18:30)。
查看更多
《微信小程序开发零基础入门-第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名称时的提
您可能关注的文档
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第03章教案_小程序框架.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第01章教案_微信小程序入门.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第02章教案_第一个微信小程序.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第04章教案_小程序组件.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第05章教案_网络API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第06章教案_媒体API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第07章教案_文件API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第09章教案_位置API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第10章教案_设备API.doc
- 《微信小程序开发零基础入门-第2版》教案(含习题) 第11章教案_界面API.doc
文档评论(0)