源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解

  • 时间:2021-03-17 10:21 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
[b]微信小程序 缓存[/b] 关于本地缓存 1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync) 可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB 2.localStorage 是永久存储 [b]一、异步缓存[/b] [b]wx.setStorage(OBJECT)[/b] 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容
wx.setStorage({

 key:"key",

 data:"value"

})

 

[b]wx.getStorage(OBJECT)[/b] 从本地缓存中异步获取指定 key 对应的内容。
wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

[b]wx.getStorageInfo(OBJECT)[/b] 异步获取当前storage的相关信息
wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

[b]wx.removeStorage(OBJECT)[/b] 从本地缓存中异步移除指定 key 。
wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

[b] 二、同步缓存[/b] [b]wx.setStorageSync(KEY,DATA)[/b] 将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。 [b]wx.getStorageSync(KEY)[/b] 从本地缓存中同步获取指定 key 对应的内容。 [b]wx.getStorageInfoSync[/b] 同步获取当前storage的相关信息 [b]wx.removeStorageSync(KEY)[/b] 从本地缓存中同步移除指定 key 。 [b]三、清理缓存[/b] [b]wx.clearStorage()[/b] 清理本地数据缓存。 [b]wx.clearStorageSync()[/b] 同步清理本地数据缓存 [b]关于同步缓存和异步缓存的区别[/b] 以Sync(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。 但是一般情况下不要用清除所有的缓存,如果想要清除相应的缓存,设置对应的缓存内容为空数组就好 [b] 关于历史搜索[/b]
<input type="text" class="search-icon" placeholder="请输入要搜索的内容" bindinput="searchNameInput"/>
<text bindtap="setSearchStorage">搜索</text>


<view>
  <view>
    <text style="float:left;" bindtap="deleteHistory">历史搜索</text>
    <text style="float:right;" bindtap="deleteHistory">删除搜索历史</text>
  </view>
  <view>
    <view class="search-list" wx:for="{{searchData}}" wx:key="item">
      <view>{{item == null?'暂无数据':item}}</view>
    </view>
  </view>
</view>

[b] 页面[/b] 这里有三个绑定事件 bindinput="searchNameInput" 获取用户输入的数据 bindtap="setSearchStorage" 设置本地存储 bindtap="deleteHistory" 删除历史搜索
 

//获取用户输入框的值
  searchNameInput:function(e){
    var that = this;
    that.setData({
      inputValue:e.detail.value
    })
  }

e.detail.value就代表了当前输入值

 

 当点击搜索的时候,bindtap="setSearchStorage"
//将用户输入的内容存入本地缓存,并且将搜索数据放到首页
setSearchStorage:function(){
  var that = this
  if(this.data.inputValue != ''){
    //调用API向本地缓存存入数据
    var searchData = wx.getStorageSync('searchData') || [] 
    searchData.push(this.data.inputValue) 
    wx.setStorageSync('searchData', searchData)

    //读取用户搜索商品
    var name = this.data.inputValue
    wx.request({
     url: 'www.shop.com/home/product/search',
     data: {name:name},
     method: 'GET', 
     success: function(res){
        that.setData({
        goodsList: res.data.info,
      })
     },
    })
  }
}

 流程这么走: 1.用户输入数据,点击搜索 2.如果数据不为空,加入(设置)本地缓存 3.去服务器搜索用户想要的数据,赋值给这个页面的变量 4.点击删除,去除本地这个key的value 这里的缓存形式的  key=>value var searchData = wx.getStorageSync('searchData') || [] 获取本地名字为'searchData'的缓存,如果'searchData'这个缓存不存在就相当于重新什么一个空数组,赋值给searchData这个变量 searchData.push(this.data.inputValue) 将用户输入的值PUSH进searchData这个变量里 wx.setStorageSync('searchData', searchData) 调用API接口,重新设置key = 'searchData'的这个缓存的value等于searchData 下面的wx.request是请求数据的内容,说腻了,印象够深了。 这里没有绑定获取缓存的bindtap,只要获取到,然后添加到Page里面的data
//从本地获取历史搜索数据

     var searchData = wx.getStorageSync('searchData')||[]

      this.setData({

        searchData:searchData

      })

 

deleteHistory

//删除历史搜索数据

  deleteHistory:function(){

    var that = this

    wx.showModal({

    title: '提示',

    content: '是否删除历史搜索',

    success: function(res) {

      if (res.confirm) {

        wx.setStorageSync('searchData', []);

        wx.switchTab({

          url: '/pages/index/index',

        })

       }

      }

    })

}

 

这里是将'searchData'这个key的缓存的value为空数组,而不是使用API提供的wx.clearStorageSync,这个会清除其他的所有缓存,而我只是想清除这一个key的缓存 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部