2.微信小程序之数据缓存Storage

朱雀 2022-05-09 10:34 324阅读 0赞

用小程序Api中的wx.getStorage , wx.setStorage实现一个收藏功能。通过读取本地数据缓存，判断当前文章是否已被收藏，是则图片高亮显示，否则反之。

## 布局 ##

## 点击图片绑定的函数 ##

handleCollection(){
        //点击的时候取反
        let isCollected = !this.data.isCollected;
        this.setData({
          isCollected
        })
    
        //提示用户
        let title = isCollected ? '收藏成功':'取消收藏';
        wx.showToast({
          title,
          icon:'success'
        })
    
        //取缓存中的数据
        wx.getStorage({
          key: 'isCollected',
          success:(res)=> {
            //将现在的数据加入缓存
            //let obj = {};不能每次将其清空
            let obj = res.data;
            let {index} = this.data;
            obj[index] = isCollected;
            wx.setStorage({
              key: 'isCollected',
              data: obj,
              success:()=>{
                console.log('缓存成功');
              }
            });
          },
        })
        
      }

## 当页面加载时 ##

data: {
        detailObj: {},
        isCollected: false,
        index: null
      },
    
    
    
      onLoad: function (options) {
        let index = options.index;
        this.setData({
          detailObj: datas.list_data[index],
          index
        });
    
        //根据本地的缓存数据判断用户是否收藏当前的文章
        let detailStorage = wx.getStorageSync('isCollected');
        
        if(!detailStorage){
          wx.setStorageSync('isCollected', {})
        }
       
        //判断用户是否收藏过,有三个值:true,false 和 undefined。
        if(detailStorage[index]){
          this.setData({
            isCollected:true
          })
        }
      },

直接贴代码啦，加上一些注释。说一下wx.getStorage( ) 和 wx.getStorageSync( ) 的区别。前者是异步存储有回调函数，后者是同步没有回调