小程序学习之数据缓存API（一）数据的存储

序言：本地缓存

为提高使用便捷性，同一小程序允许每个用户单独存储10MB以内的数据在本地设备中，这也叫小程序的本地缓存。

ps：小程序的本地缓存仅用于方便用户，如果用户设备的存储空间不足，微信会清空最近较久未使用本地缓存。

正文：数据的存储

1.异步存储数据

使用异步接口wx.setStorage(OBJECT)将数据存储到本地缓存中指定的key中，参数说明如下：

示例代码格式：

ps：key和value可替换成开发者所需其他文本内容，且success、fail、complete函数可省略不写

<!--wxml-->
<view class="title">数据存储的简单应用</view>
<view class="demo-box">
  <view class="title">wx.setStorage(OBJECT)</view>
  <input name="key" placeholder="请输入KEY名称" bindblur="keyInput"></input>
  <input name="value" placeholder="请输入DATA值" bindblur="dataInput"></input>
  <button type="primary" bindtap="setStorage">数据存储</button>
</view>

//js
Page({
  data:{
    key:'',
    data:''
  },
  keyInput:function(e){
    this.setData({
      key:e.detail.value
    })
  },
  dataInput:function(e){
    this.setData({
      data: e.detail.value
    })
  },
  setStorage:function(e){
    let key = this.data.key
    if(key.length==0){
      wx.showToast({
        title: 'key不能为空',
        icon: 'none'
      })
    }else{
      wx.setStorage({
        key: key,
        data: this.data.data
      })
    }
  }
})

2.同步存储数据

使用同步接口wx.setStorageSync(KEY,DATA)将DATA值存储到本地缓存中指定的KEY中，参数说明如下：

示例代码格式：

简单应用：
 

<!--wxml-->
<view class="title">数据存储的简单应用</view>
<view class="demo-box">
  <view class="title">wx.setStorageSync(OBJECT)同步存储</view>
  <input name="key1" placeholder="请输入KEY名称" bindblur="keyInput1"></input>
  <input name="data1" placeholder="请输入DATA值" bindblur="dataInput1"></input>
  <button type="primary" bindtap="setStorageSync">数据同步存储</button>
</view>

//js
Page({
  data:{
    key1:'',
    data1:''
  },
  //同步存储
  keyInput1: function (e) {
    this.setData({
      key1: e.detail.value
    })
  },
  dataInput1: function (e) {
    this.setData({
      data1: e.detail.value
    })
  },
  setStorageSync:function(e){
    let key = this.data.key1
    if(key.length==0){
      wx.showToast({
        title: 'KEY不能为空',
        icon: 'none',
      })
    }else{
      wx.setStorageSync(key, this.data.data1)
    }
  }
})