当我们做微信小程序开发的时候，我们经常要与后台打交道，做一些数据缓存的工作

用到的方法为 wx.setStorage wx.getStorage wx.clearStorage

第一步:存储数据

首先我们要定义初始化的值默认为空 js中

data: {
    key:"",
    data:"",
    info:""
  },

然后利用input标签为其绑定一个bindinput属性方法就是key值和data值改变的方法在js中会定义的

<input class="border-bottom" placeholder="请输入key值" name="key" value="{
   
   {key}}" bindinput="keyChange" type="text"/>
   <input class="border-bottom" placeholder="请输入data值" name="data" value="{
   
   {data}}" bindinput="dataChange" type="text"/>

当我们在input标签中输入内容的时候，bindinput事件就会随时记录下我们输入的内容，并会触发keyChange方法，会记录在object下的detail中的value中，我们把输入框中的值付给我们空的key

keyChange:function(res){
    console.log(res)
    this.setData({
      key:res.detail.value
    })
  },
  dataChange:function(res){
    console.log(res)
    this.setData({
      data:res.detail.value
    })
  },

res是返回的结果，应该是一个object字符串注意赋值的路径 data也是同样的方法

当我们输入赋值完成之后就要存储数据了

为一个按钮绑定一个点击事件，点击之后会触发自定义的setStorage方法，

<view class="padding">
     <button type="primary" bindtap="setStorage">存储数据</button>
     <button type="margin" bindtap="getStorage">读取数据</button>
     <button type="margin" bindtap="clearStorage">清理数据</button>
   </view>

wx.setStorageSync( key, data)

什么的data是要存储的内容，key是以这个名字进行存储，方便以后查找

我们首先要定义一个key 和data 让它们等于数组对象中的key和data 然后让数据存储中的等于我们定义的，这样方便，当我们输入完成以后点击数据存储按钮数组data中的数据赋值给data存入了

setStorage:function(){
    var key = this.data.key
    var data = this.data.data
    if(key){
      wx.setStorageSync(key, data)
      this.setData({
        key:key,
        data:data,
        info:"key="+key+"   data="+data
      })
    }else{
      this.setData({
        info:"请输入key值"
      })
    }
  },

第二部：数据读取

当我们点击数据读取按钮时 key值已经是数组中的key值了，如果存的数据中有输入时候的key值那么就就调用 data=wx.getStorageSync(key) 给data从存入的数据查找内容赋值

getStorage:function(){
    var key = this.data.key
    var data 
    if(key){
       data=wx.getStorageSync(key)
       this.setData({
        info:"key="+key+"   data="+data
       })
    }else{
      this.setData({
        info:"请输入key值"
      })
    }
  },

第三部：数据删除

给原来的数组的内容赋值为空即可但还是要调wx.clearStorage()方法

clearStorage:function(){
    wx.clearStorage()
    this.setData({
      key:"",
    data:"",
    info:"数据清理成功"
    })
  },

完整版的代码如下

HTML


<view class="padding">
   <input class="border-bottom" placeholder="请输入key值" name="key" value="{
   
   {key}}" bindinput="keyChange" type="text"/>
   <input class="border-bottom" placeholder="请输入data值" name="data" value="{
   
   {data}}" bindinput="dataChange" type="text"/>

   <view class="padding">
     <button type="primary" bindtap="setStorage">存储数据</button>
     <button type="margin" bindtap="getStorage">读取数据</button>
     <button type="margin" bindtap="clearStorage">清理数据</button>
   </view>

   <!-- 数据处理结果 -->
   <view class="padding">
    数据处理结果：
     <text class="text-red">{
   
   {info}}</text>
   </view>
</view>

// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    key:"",
    data:"",
    info:""
  },
  keyChange:function(res){
    console.log(res)
    this.setData({
      key:res.detail.value
    })
  },
  dataChange:function(res){
    console.log(res)
    this.setData({
      data:res.detail.value
    })
  },
  setStorage:function(){
    var key = this.data.key
    var data = this.data.data
    if(key){
      wx.setStorageSync(key, data)
      this.setData({
        key:key,
        data:data,
        info:"key="+key+"   data="+data
      })
    }else{
      this.setData({
        info:"请输入key值"
      })
    }
  },
  getStorage:function(){
    var key = this.data.key
    var data 
    if(key){
       data=wx.getStorageSync(key)
       this.setData({
        info:"key="+key+"   data="+data
       })
    }else{
      this.setData({
        info:"请输入key值"
      })
    }
  },
  clearStorage:function(){
    wx.clearStorage()
    this.setData({
      key:"",
    data:"",
    info:"数据清理成功"
    })
  },
  onLoad() {
    
  },
  
  
})

效果图

微信小程序的数据缓存

wx.setStorageSync( key, data)

猜你喜欢