微信小程式---存儲本地緩存資料

微信小程式之資料緩存

開發中常用setStorageSync來實作本地資料緩存操作

（1）點選緩存案例：

<button bindtap="toStorage">存儲</button>

  // 本地存儲
  toStorage(){
    // 擷取使用者資料存到本地
    const appInstance = getApp()
    console.log(appInstance.globalData);//列印使用者資訊
    try {
      wx.setStorageSync('userInfo', appInstance.globalData);
      //彈框提示
      wx.showToast({
        title: '存儲本地緩存資料成功',
        icon: 'none',
        duration: 2000
      });
    } catch (e) { 
      //彈框提示
      wx.showToast({
        title: '存儲本地緩存資料失敗，請檢查相關配置，是否聯網等',
        icon: 'none',
        duration: 2000
      });
    }
  }      

點選按鈕緩存失敗時提示：

，點選按鈕成功時提示

但日常開發裡，像使用者資訊資料資料緩存，無需人工操作緩存，一般都是頁面加載完畢後自動緩存。是以接下來将其修改下

關于app.js小程式生命周期和page.js頁面生命周期，詳情見下篇文章微信小程式~生命周期方法詳解

（2）自動快取區域資料

    頁面生命周期

    日常開發中，一般會把需要讀取緩存的資料，放到onready函數裡

    ①打開小程式後會依次執行onLoad，onReady和onShow方法

    ②前背景切換會分别執行onHide和onShow方法，

    ③小程式頁面銷毀時會執行 onUnload方法

onReady:function(){
    // 擷取使用者資料存到本地
    const appInstance = getApp()
    console.log(appInstance.globalData);//使用者資訊
    try {
      wx.setStorageSync('userInfo', appInstance.globalData);
      //一般剛加載完畢後，資料緩存成功也不會有彈框提示，是以這裡去掉
    } catch (e) {
      //失敗時，彈框提示
      wx.showToast({
        title: '存儲本地緩存資料失敗，請檢查相關配置，是否聯網等',
        icon: 'none',
        duration: 2000
      });
    }
  }      

此時頁面加載完畢後，使用者資訊便會自動緩存到本地