1.小程序如何往缓存中存数据

将数据放入指定缓存中。 这里缓存块的名称叫‘mydata’，你可以根据自己的需求，取合适的名字。代码如下

    let data = {
      name: '8BQ了',
      age: '18',
      gender: 0
    }
    wx.setStorageSync('myData', data)

效果：这里是存了个对象当示例。也可以存数组，字符串等。

2.小程序如何从缓存中取数据

使用 wx.getStorageSync(‘myData’)，即可取出‘myData’中缓存的数据。以下代码打印结果为 hello

	let result = wx.getStorageSync('myData')
    console.log(result)

3.小程序如何修改缓存中的数据

先取出数据，修改相应数据，再将其放入指定缓存中。

	let result = wx.getStorageSync('myData')
    result.name = '哈哈哈'
    wx.setStorageSync('myData', result)

效果如下：这里把name值，由‘8BQ了’ 改为 ‘哈哈哈’

4.小程序如何使用vant组件

(1) 如果标签上绑定的是数据值，则直接使用该数据名称做属性。同时小程序的值放在{{ }}中。

例如：官方文档如下。其中value与options都是data中的数据，则在小程序中直接使用该数据名称做属性名。

<van-dropdown-menu>
  <van-dropdown-item v-model="value" :options="option" />
</van-dropdown-menu>

在小程序中的使用如下：

<van-dropdown-menu>
  <van-dropdown-item value="{{value}}" options="{{options}}" />
</van-dropdown-menu>

(2) 如果在vant中是事件方法，小程序中使用，需要在前面加bind:

比如我们现在要调用 change事件,在小程序中使用，change前面要加bind:

<van-dropdown-menu>
	<van-dropdown-item value="{{value}}" options="{{options}}"  bind:change="dropdownChange"/>
</van-dropdown-menu>

项目需求大概是这样的一个流程，当用户点击“选为当前设备”，点击的那个按钮变为 灰色按钮且展示的文字是“当前设备”，其他的按钮展示成“选为当前设备”，且按钮成绿色状态

本地缓存数据如下:

 deviceList:[
	 {deviceName:'设备A',deviceId:'a',selStatus:false},
	 {deviceName:'设备B',deviceId:'b',selStatus:false},
	 {deviceName:'设备C',deviceId:'c',selStatus:true}
 ]

现在将设备A项选为当前设备：

index.wxml:

<view class="device-list" wx:for="{{deviceList}}" wx:for-item="item" wx:key="item">
  <view class="device_name">{{item.deviceName}}</view>
  <button bindtap="setCurDevice" data-id="{{item.deviceId}}" disabled="{{item.selStatus ? true : false}}"
    class="selectCur" type="{{item.selStatus ? 'default' : 'primary'}}">{{item.selStatus ?'当前设备':'选为当前设备'}}</button>
</view>

index.js:

Page({
	data:{
		deviceList:[]
	},
	onShow(){
		let deviceList = wx.getStorageSync('deviceList');
		this.setData({
			deviceList
		})
	},
	//点击选为当前设备
	setCurDevice(e){
		let deviceList = wx.getStorageSync('deviceList');
	    let setAfterDeviceList = deviceList.map(item => {
	      item.deviceId == e.currentTarget.dataset.id?item.selStatus = true:item.selStatus = false;
	      return item
	    })
	    this.setData({
	      deviceList:setAfterDeviceList
	    })
	    wx.setStorageSync('deviceList', setAfterDeviceList)
	}
})

Storage

微信小程序歌曲列表页实现中实现了歌曲列表，因为歌曲列表中包含了歌曲信息，所以我们将歌曲列表数据保存在缓存中，这样在歌曲播放页就不需要重新请求数据，同时从播放页返回歌曲列表页也不需要重新请求数据。

只需在请求云函数成功后调用以下方法即可

全部代码如下：

// pages/musiclist/musiclist.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    musiclist: [],
    listInfo: {},
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
    wx.showLoading({
      title: '加载中',
    })
    wx.cloud.callFunction({
      name: 'music',
      data: {
        playlistId: options.playlistId,
        $url: 'musiclist'
      }
    }).then((res) => {
      console.log(res)
      const pl = res.result.playlist
      this.setData({
        musiclist: pl.tracks,
        listInfo: {
          coverImgUrl: pl.coverImgUrl,
          name: pl.name,
        }
      })
      this._setMusiclist()
      wx.hideLoading()
    })
  },

  _setMusiclist() {
    wx.setStorageSync('musiclist', this.data.musiclist)
  },
})

重新编译后，进入歌曲列表页，打开开发工具Storage，查看缓存数据。

我们点击其他歌单，进入歌曲列表，缓存中的数据发生了变化，说明会覆盖掉原来该 key 对应的内容。