微信小程序之异步本地存储的应用：setStorage、getStorage，以及setStorage与setStorageSync的主要区别

我觉得学习某一个新东西，最好还是从一个实际应用的例子上下手会比较好，在这里，我以一个简易版本的“留言板”小程序为例，下面大家先来看看代码实现：

*.wxml的内容如下：

*.js的内容：

Page({  
  /** 
   * 页面的初始数据 
   */  
  data: {  
    inputVal: '',  
    msgData:[],  
    status: false  
  },  
  onLoad: function () {  
    var that = this;  
    wx.getStorage({  
      key: 'msgData',  
      success: function(res) {  
        that.setData({  
          msgData: res.data  
        });  
        if(that.data.msgData.length==0){  
          that.setData({status: false});  
        }else{  
          that.setData({status: true});  
        }  
      },  
      fail: function(res){  
        console.log('获取本地数据失败，值为：', res);  
      }  
    });  
  },  
  changeInputVal:function(e){  
    this.setData({  
      inputVal: e.detail.value  
    });  
  },  
  addMsg: function(){  
    var that = this;  
    var list = that.data.msgData;  
    list.push({  
      msg: that.data.inputVal  
    });  
    that.setData({  
      msgData: list,  
      inputVal: ''  
    });  
    wx.setStorage({  
      key: 'msgData',  
      data: that.data.msgData,  
      success: function(res){  
        that.setData({  
          msgData: that.data.msgData,  
          status: true  
        });  
        console.log('添加~setStorage成功：', res.data);  
      }  
    });  
  },  
  deleteMsg: function(e){  
    // console.log(e.target.dataset.index); 获取删除的对象下标  
    var that = this;  
    var n = e.target.dataset.index;  
    var list = that.data.msgData;  
    list.splice(n, 1);  
    that.setData({  
      msgData: list  
    });  
    wx.setStorage({  
      key: 'msgData',  
      data: that.data.msgData,  
      success: function (res) {  
        that.setData({  
          msgData: that.data.msgData  
        });  
        if(that.data.msgData.length==0){  
          that.setData({  
            msgData: that.data.msgData,  
            status: false  
          });  
        }else{  
          that.setData({  
            msgData: that.data.msgData,  
            status: true  
          });  
        }  
        console.log('删除~setStorage成功：', res.data);  
      }  
    });  
  }  
})  

代码演示如下：

我对于异步存储的理解是：哪个事件里有操作数据，setStorage就要放在哪个事件里，例如这个案例中的添加事件与删除事件都要操作数据，每执行一次事件都数据的变化，所以需要将setStorage放在这两个事件中，以备及时更新本地数据。

setStorage与setStorageSync的主要区别在于：一个是异步存储，一个是同步存储，即异步不会阻塞当前任务，不管数据存储成功与否，都会往下执行，而同步要等到存储成功后才能往下执行，异步可以保证好的性能，而同步可以保证数据的安全