实现收藏功能

利用本地存储实现收藏功能（小程序）

1.定义数据结构

data: {
​
   detail:{},//用来接收获取的数据
​
   no_sel:"../../images/none-star.png",//未被收藏的图片链接
​
   sel:"../../images/star.png",//被收藏的图片链接
​
   flag:false,//用来判断是否被收藏
​
   storeArr:[]//存储于本地的收藏的唯一标识
​
 },

 

2.刚进入界面时发起的请求获取数据

onLoad: function (options) {
        // console.log(options.id);
        wx.showLoading({
          title: '正在加载....',
        })
        http({
          url:'/1700-3',
          data:{
           showapi_appid:'100079',
           showapi_sign:"9e038adb10ef4cf68db6bc8d0feed220",
           id:options.id
          }
       }).then(res=>{
          //  console.log(res);
           wx.hideLoading();
           this.setData({
              detail:res.data.showapi_res_body
           })
          //  console.log(this.data.detail);
           this.getflag();//调用自定义函数比较本地数据
       }) 
  },

 

getflag

 getflag(){
    let arr =wx.getStorageSync('storeArr');
    if(!arr) return;
    // console.log(this.data.detail.classifyId);
    let st_id = arr.indexOf(this.data.detail.id)
    console.log(st_id);
    if(st_id!==-1){
        this.setData({
          flag:true
        })
    }else{
      this.setData({
        flag:false
      })
    }
    this.setData({
      id:st_id
   })
  },

 

3.页面比较flag切换图片地址(detail.id唯一标识)

 <view>关注: sel
    <image src="{{flag?sel:no_sel}}" class="img"                    mode="widthFix" bindtap="collection" 
        data-id="{{detail.id}}">
    </image>
 </view>

 

4.响应点击切换收藏事件

collection(e){
      let id = e.currentTarget.dataset.id;
      let storeArr_l=[];
      let lishi=wx.getStorageSync('storeArr');
      lishi?storeArr_l=lishi:[];
      // console.log(storeArr_l);
      if(!this.data.flag){  
          storeArr_l.push(id);
          wx.setStorage({
            data: storeArr_l,
            key: 'storeArr',
          })
      }
      if(this.data.flag){
        storeArr_l=wx.getStorageSync('storeArr');
        let index = storeArr_l.indexOf(id)
        // console.log(storeArr_l);
        // console.log(index);
        storeArr_l.splice(index,1);//删除对应的数据
        // console.log(storeArr_l);
      }
      this.setData({
        flag:!this.data.flag//切换收藏状态
      })
      wx.setStorage({
        data: storeArr_l,
        key: 'storeArr',
      })
  },