微信小程序---存儲本地緩存數據

微信小程序之數據緩存

 

開發中常用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
      });
    }
  }

此時頁面加載完畢后，用戶信息便會自動緩存到本地

 

 

 

 

 

 

 

.