本帖最后由 听海——sky 于 2019-2-14 15:21 编辑
缓存缓存的作用是为了加快数据的访问,小程序里面可以设置缓存(本地),设置缓存后,如果没有手动清除缓存的话,就会一直存在。大小不能超过10M。数据优先。 - wx.setStorageSync('key','value'):同步
- wx.setStorage({key:'key',data:'value'}):异步
复制代码- wx.setStorageSync('icessun','2018/2/14') // 同步设置缓存
- wx.setStorage({key:'跳一跳',data:'666'}) // 异步设置缓存
复制代码
同步设置缓存,缓存值可以为一个字符串,也可以为一个对象,当第一个参数值相同的时候,后面的会覆盖前面的。异步也一样。
- wx.setStorageSync('key',{
- game: "跳一跳",
- gold: "666"
- })
复制代码
异步设置缓存,里面的属性是固定的,接收一个对象为参数,也就是说,当你不使用key/data作为参数名字时,就会报错: - setStorage:fail parameter error: parameter.key should be String instead of Undefined;
复制代码
获取缓存
获取缓存的方法很简单,把对应设置缓存的set变为get就行。 - wx.getStorageSync('key'):同步 直接返回获取到的值
- wx.getStorage({key:'key',callback}):异步 通过回调函数返回获取的值
复制代码- wx.setStorageSync('key', {
- game: "跳一跳",
- gold: "666"
- })
- var a=wx.getStorageSync('key');
- console.log(a); // {game: "跳一跳", gold: "666" }
复制代码
上面是同步获取缓存值的方法,直接通过变量去接收获取到的缓存值,如果是异步的方法获取缓存值,那么需要在回调函数里面取得缓存值;同步和异步两种方法中的`key`是必须要传入的,否者不知道获取的具体缓存值。 - wx.setStorage({
- key: "跳一跳",
- data: "666"
- })
- var a = wx.getStorage({
- key:'跳一跳',
- success: function (res) {
- console.log(res.data);
- console.log(res);
- }
- });
复制代码![异步获取缓存值](
清除缓存 清除缓存的方法有两种,clearStorage和removeStorage,每一种都有同步和异步之分: - // 从本地缓存中异步移除指定 key
- wx.removeStorage({
- key: 'key',
- success: function(res) {
- console.log(res.data)
- }
- })
- // 同步移除指定 key
- try {
- wx.removeStorageSync('key')
- } catch (e) {
- // Do something when catch error
- }
- //清理本地数据缓存
- wx.clearStorage()
- // 同步清理本地数据缓存
- try {
- wx.clearStorageSync()
- } catch(e) {
- // Do something when catch error
- }
复制代码前面说过,缓存是一直存在的,只能通过调用这个方法去清除缓存。
缓存实践
那么用缓存,怎么样实现呢?首先是文章数量很多,怎么样知道是那篇文章被收藏了,也就是说文章与缓存数据怎么样一一对应,同时也说明缓存数据的存储方式?收藏的图标怎么样容易切换显示(这个问题,前面的文章已经说了解决办法)?
收藏和未收藏,是两个不同的状态,那么就会想到布尔值去实现;与文章的一一对应关系,那么会想到使用一个对象去操作,key 表示对应的文章,value表示收藏的状态。
- postCollected={
- 0:'ture', // 文章的id:是否被收藏(true/false)
- 1:'false'
- ...
- }
复制代码
在文章加载的时候,先要获取一下缓存,看是否存在收藏记录,然后进行状态的判断,弹框提示。
- var postData = require('相对路径') // 本地数据
- onLoad:function(options){
- var postId = options.id;
- var postData = postData.postList[postId]; // 本地数据中数据输出,对应页面的数据
- this.setData({
- postData:postData,
- postId:postId
- })
- var postsCollected= wx.getStorageSync('icessun'); // 读取缓存
- if(postsCollected){ // 状态判断
- var postStor = postsCollected[postId];
- this.setData({
- collected:postStor
- })
- }else{
- var postsCollected = {}; // 把缓存对象默认为空,防止后面访问对象属性出错
- postsCollected[postId] = false;
- wx.setStorageSync('icessun',postsCollected);
- }
- }
复制代码
其中的options.id获取的是前一个页面传递过来的参数(前一篇文章末尾已经说过):文章ID。然后判断缓存中页面是否被收藏,把这个状态值设置给wxml,进而控制图片的显示。 - <!--collected 状态变量 在js文件里面控制真假 -->
- <image catchtap='onCollectionTap' wx:if='{{collected}}' src='/images/icon/collection.png'></image>
- <image catchtap='onCollectionTap' wx:else src='/images/icon/collection-anti.png'></image>
复制代码
实现了缓存文章收藏的状态,怎么样在收藏和未收藏之间来回切换呢? - onCollectionTap: function (event) {
- var postsStorage = wx.getStorageSync('icessun');
- var postStor = postsStorage[this.data.currentPostId]; // 根据文章的id,获取收藏的状态
- postStor = !postStor; // 收藏与未收藏之间的切换
- postsStorage[this.data.currentPostId] = postStor;
- this.showModal(postsStorage, postStor)
- }
复制代码
异步存储缓存 - onCollectionTap: function (event) {
- this.getPostCollectedAsy();
- },
- // 异步方法缓存
- getPostCollectedAsy: function () {
- var that = this;
- wx.getStorage({ // 异步方法的使用
- key: 'icessun',
- success: function (res) {
- var postCollected = res.data;
- var postsColl = postCollected[that.data.currentPostId];
- postsColl = !postsColl;
- postCollected[that.data.currentPostId] = postsColl;
- that.showToast(postCollected, postsColl);
- },
- })
- }
复制代码异步不会阻塞UI,但还是需要根据实际业务需求来,业务需要解耦的话,那么就使用异步,一般都推荐使用同步。脱离业务谈同步和异步,意义不大。
在收藏图片上面加一个按钮,点击的时候,弹出一个提示框:是否收藏。跟新收藏状态就行。 - showModal: function (postsStorage, postStor) {
- var _this = this; // 注意this的指向
- wx.showModal({
- title: ' ',
- content: postStor ? '收藏该文章?' : '取消收藏该文章?',
- showCancel: 'true',
- cancelText: '取消',
- cancelColor: '#333',
- confirmText: '确认',
- confirmColor: '#405f80',
- success: function (res) {
- if (res.confirm) {
- wx.setStorageSync('icessun', postsStorage);
- _this.setData({
- collected: postStor
- })
- }
- }
- })
- }
复制代码this指向的是函数调用的上下文环境,success函数里面的this指向showModal,但里面没有setData方法,this执行被改变了。所以要在showModal函数里面先把this暂存一下,保持this执行的不变。
界面交互,两种方法showToast,showModal,前者不用操作就会消失,后者需要操作才会消失。 - showToast: function (postsStorage, postStor) {
- var _this = this;
- // 先根据缓存设置图标,然后在提示文字 注意参数的传递 也要注意this的指向
- wx.setStorageSync('icessun', postsStorage);
- _this.setData({
- collected: postStor
- });
- wx.showToast({
- title: postStor ? '收藏成功' : '取消成功',
- duration: 1000,
- icon: "success"
- })
- }
复制代码
文章阅读数增加 使用缓存去记录文章的阅读数量(本地数据)。 因为微信小程序核心是一个响应的数据绑定系统,整个系统分为两块视图层(View)和逻辑层(App Service),框架可以让数据与视图非常简单地保持同步。当做数据修改的时候,只需要在逻辑层修改数据,视图层就会做相应的更新。
思考: 类似与上一个文章收藏,也是使用一个对象把文章ID和阅读量进行一一对应。页面数据的更改,都是在该页面的Data属性里面进行;进入了页面详情页,那么该页面的浏览量就增加1; - onLoad: function (options) {
- // 页面加载的时候先访问缓存
- var viewDatas = wx.getStorageSync("viewData");
- for (var i = 0; i < postData.postList.length; i++) {
- if (viewDatas[i]) {
- postData.postList[i].view_num = viewDatas[i]
- }
- }
- this.setData({
- // 获取导入的模版数据,设置到页面data数据里面,供wxml页面使用
- post_key: postData.postList
- });
- },
- newsdetail: function (event) {
- // 当前点击事件触发的元素身上设置的postid,访问自定义属性
- var postid = event.currentTarget.dataset.postid;
- var viewDatas = wx.getStorageSync("viewData");
- if (viewDatas) {
- if(viewDatas[postid]){
- viewDatas[postid] = viewDatas[postid] + 1;
- }else{
- viewDatas[postid]=1;
- }
- postData.postList[postid].view_num = viewDatas[postid];
- this.setData({
- post_key: postData.postList
- });
- wx.setStorageSync("viewData", viewDatas);
- }
- else {
- var viewDatas = {};
- viewDatas[postid] = 1;
- postData.postList[postid].view_num = 1;
- this.setData({
- post_key: postData.postList
- });
- wx.setStorageSync("viewData", viewDatas);
- }
- wx.navigateTo({
- url: 'post-detail/post-detail?id=' + postid
- });
- }
复制代码
首先,页面初始化的时候,就应该读取一下缓存;根据缓存与文章是一一对应的关系,使用循环去操作。注意一点的是,我们应该判断viewDatas的真假,而不是wx.getStorageSync("viewData")的真假。然后是详情页面的点击,和前面说的一样,应该判断viewDatas的真假,否者会出现,第一次点击是好的,然后就出现浏览量为null的情况,是因为点击一个没有在缓存中出现过的文章,其viewDatas[postid]为undefined,与数字1相加出现NaN,进而出现null。初始化的时候,要把缓存置空var viewDatas = {};,防止后面访问出现错误。 - <i><i>if(viewDatas[postid]){
- viewDatas[postid] = viewDatas[postid] + 1;
- }else{
- viewDatas[postid]=1;
- }</i></i>
复制代码 |