微信小程序缓存（todo-list案例）

本文主要是介绍微信小程序缓存（todo-list案例），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

同步存储

wx.setStorageSync('list1', {name:"尚云科技",age:5})

同步取出

wx.getStorageSync('list1')

双向绑定案例：

this.setData({list:wx.getStorageSync('list1')})

异步存储

    wx.setStorage({
      data: {name:"天亮教育",age:4},//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
      key: 'list',//本地缓存中指定的 key
})

异步取出

wx.getStorage({
      key: 'list',
      success(res){
        console.log(res);
      }
    })

缓存的限制和隔离

• 小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过wx.setStorage写入缓存会触发fail回调。
• 小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，考虑到同一个设备可以登录不同微信用户，宿主环境还对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露。

由于本地缓存是存放在当前设备，用户换设备之后无法从另一个设备读取到当前设备数据，因此用户的关键信息不建议只存在本地缓存，应该把数据放到服务器端进行持久化存储

todo-list案例

wxml

<!--logs.wxml-->
<view class="container log-list">
  <text>todolist</text>
  <view class="top">
    <input type="text" model:value='{{inputValue}}'/>
    <button bindtap="add">添加</button>
  </view>
  <view class="middle">
    <text>待完成：</text>
    <block wx:for="{{list}}" wx:key="index">
      <view>
      <checkbox bindtap="select" 
      data-select-num="{{index}}" 
      data-select-item="{{item}}"
      checked="{{isChecked}}"
      >{{item}}
      </checkbox>
      <button bindtap="delete" data-select-item="{{index}}">删除</button>
      </view>
    </block>
  </view>
  <view class="bottom">
    <text>已完成：</text>
    <block wx:for="{{listed}}" wx:key="index">
      <view>
      <checkbox checked='{{checked}}'
      bindtap="selected" 
      data-select-num="{{index}}" 
      data-select-item="{{item}}"
      >{{item}}</checkbox>
      <button bindtap="deleted" data-select-item="{{index}}">删除</button>
      </view>
    </block>
  </view>
</view>

js

// logs.js

Page({
  data: {
    list:[],
    inputValue:'',
    listed:[],
    isChecked:false,
    checked:true
  },
  add(){
    this.data.list.push(this.data.inputValue)
    this.setData({inputValue:''}) 
    this.setData({list:this.data.list})
    wx.setStorageSync('list1', this.data.list)

  },
  // 待完成点击
  // 思路：1、点击时将内容当作参数传递，将内容push到已完成数组中
  //      2、点击时将索引当作参数传递，根据索引将待完成数组中元素删除
  //      3、将两个数组放入缓存中，下面操作同理
  select(e){
    this.data.listed.push(e.currentTarget.dataset.selectItem)
    this.setData({listed:this.data.listed})
    this.data.list.splice(e.currentTarget.dataset.selectNum,1)
    this.setData({list:this.data.list})
    this.setData({isChecked :false})
    // 放入缓存中
    wx.setStorageSync('list1', this.data.list)
    wx.setStorageSync('list2', this.data.listed)
  },
  // 待完成删除
  // 思路：点击时将索引当作参数传递，根据索引将数组中元素删除
  delete(e){
    this.data.list.splice(e.currentTarget.dataset.selectNum,1)
    this.setData({list:this.data.list})
    wx.setStorageSync('list1', this.data.list)
    
  },
  // 已完成点击
  selected(e){
    this.data.list.push(e.currentTarget.dataset.selectItem)
    this.setData({list:this.data.list})
    this.data.listed.splice(e.currentTarget.dataset.selectNum,1)
    this.setData({listed:this.data.listed})
    this.setData({checked :true})
    wx.setStorageSync('list1', this.data.list)
    wx.setStorageSync('list2', this.data.listed)
  },
  // 已完成删除
  deleted(e){
    this.data.listed.splice(e.currentTarget.dataset.selectNum,1)
    this.setData({listed:this.data.listed})
    wx.setStorageSync('list2', this.data.listed)
  },
  onl oad() {
    // 从缓存中取出，并赋给两个分别数组
    this.setData({list:wx.getStorageSync('list1')})
    this.setData({listed:wx.getStorageSync('list2')})
  }
})

wxss  将app.json中默认"style": "v2"删除

.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}
.log-item {
  margin: 10rpx;
}
.top{
  width: 100%;
  display: flex;
}
.top>input{
  border: 1px solid #ccc;
  width: 60%;
  height: 68rpx; 
}
.top>button{
  margin-left: 10%;
  width: 30%;
  height: 70rpx; 
  line-height: 70rpx;
}

.middle{
  margin-top: 30rpx;
  width: 100%;
}
.bottom>view,
.middle>view{
  margin-top: 20rpx;
}
.bottom button,
.middle button{
  font-size: 32rpx;
  background-color: red;
  text-align: center;
  line-height: 50rpx;
  padding: 0;
  float: right;
  margin: 0;
  width: 120rpx;
  height: 50rpx;
}


.bottom{
  margin-top: 30rpx;
  width: 100%;
}

这篇关于微信小程序缓存（todo-list案例）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！