微信小程序入門到實戰（五）

緩存

緩存的做用是爲了加快數據的訪問，小程序裏面能夠設置緩存（本地），設置緩存後，若是沒有手動清除緩存的話，就會一直存在。大小不能超過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[i]的真假，而不是wx.getStorageSync("viewData")的真假。而後是詳情頁面的點擊，和前面說的同樣，應該判斷viewDatas[i]的真假，否者會出現，第一次點擊是好的，而後就出現瀏覽量爲null的狀況，是由於點擊一個沒有在緩存中出現過的文章，其viewDatas[postid]爲undefined，與數字1相加出現NaN，進而出現null。初始化的時候，要把緩存置空var viewDatas = {};，防止後面訪問出現錯誤。

if(viewDatas[postid]){
        viewDatas[postid] = viewDatas[postid] + 1;
 }else{
        viewDatas[postid]=1;
      }