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


Posted in Javascript onJanuary 17, 2017

微信小程序 缓存

关于本地缓存

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

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
奇妙的js
Sep 24 Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
js实现文字无缝向上滚动
Feb 16 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 jQuery
关于redux-saga中take使用方法详解
Feb 27 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
Mar 01 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue-i18n结合Element-ui的配置方法
May 20 Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
详谈JavaScript的闭包及应用
Jan 17 #Javascript
用原生js做单页应用
Jan 17 #Javascript
js cookie实现记住密码功能
Jan 17 #Javascript
angularjs ocLazyLoad分步加载js文件实例
Jan 17 #Javascript
微信小程序 登陆流程详细介绍
Jan 17 #Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 #Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 #Javascript
You might like
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php使用ereg验证文件上传的方法
2014/12/16 PHP
PHPExcel中文帮助手册|PHPExcel使用方法(分享)
2017/06/09 PHP
JQuery 文本框使用小结
2010/05/22 Javascript
javascript中数组中求最大值示例代码
2013/12/18 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
javascript实现动态模态绑定grid过程代码
2014/09/22 Javascript
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
js 获取元素在页面上的偏移量的方法汇总
2015/04/13 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
2016/09/05 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
vue项目中自定义video视频控制条的实现代码
2020/04/26 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python 查看文件的编码格式方法
2017/12/21 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Python制作动态字符图的实例
2019/01/27 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
CSS3近阶段篇之酷炫的3D旋转透视
2016/04/28 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
怎样写好自我鉴定
2013/12/04 职场文书
高中化学教学反思
2014/01/13 职场文书
初中优秀班集体申报材料
2014/05/01 职场文书
创先争优一句话承诺
2014/05/29 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python
Spring boot应用启动后首次访问很慢的解决方案
2021/06/23 Java/Android
Python内置类型集合set和frozenset的使用详解
2022/04/26 Python