微信小程序中缓存的示例分析-创新互联

这篇文章主要介绍微信小程序中缓存的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司是专业的硚口网站建设公司，硚口接单;提供成都网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行硚口网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

微信小程序 缓存

关于本地缓存

1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）

可以对本地缓存进行设置、获取和清理。本地缓存较大为10MB

2.localStorage 是永久存储

一、异步缓存

wx.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容

wx.setStorage({

 key:"key",

 data:"value"

})

wx.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

wx.getStorage({

 key: 'key',

 success: function(res) {

   console.log(res.data)

 }

})

wx.getStorageInfo(OBJECT)

异步获取当前storage的相关信息

wx.getStorageInfo({

 success: function(res) {

  console.log(res.keys)

  console.log(res.currentSize)

  console.log(res.limitSize)

 }

})

wx.removeStorage(OBJECT)

从本地缓存中异步移除指定 key 。

wx.removeStorage({

 key: 'key',

 success: function(res) {

  console.log(res.data)

 }

})

二、同步缓存

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

wx.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

wx.getStorageInfoSync

同步获取当前storage的相关信息

wx.removeStorageSync(KEY)

从本地缓存中同步移除指定 key 。

三、清理缓存

wx.clearStorage()

清理本地数据缓存。

wx.clearStorageSync()

同步清理本地数据缓存

关于同步缓存和异步缓存的区别

以Sync（同步，同时）结尾的都是都是同步缓存，二者的区别是，异步不会阻塞当前任务，同步缓存直到同步方法处理完才能继续往下执行。

但是一般情况下不要用清除所有的缓存，如果想要清除相应的缓存，设置对应的缓存内容为空数组就好

关于历史搜索

<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>

页面

这里有三个绑定事件

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的缓存

以上是“微信小程序中缓存的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

文章标题：微信小程序中缓存的示例分析-创新互联
网页URL：https://www.cdcxhl.com/article28/hhdjp.html

成都网站建设公司_创新互联，为您提供自适应网站、服务器托管、用户体验、Google、网站设计、企业建站

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联