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


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 相关文章推荐
excel操作之Add Data to a Spreadsheet Cell
Jun 12 Javascript
jQuery 操作下拉列表框实现代码
Feb 22 Javascript
javascript之典型高阶函数应用介绍
Jan 10 Javascript
javascript 原型链维护和继承详解
Nov 26 Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
详解EasyUi控件中的Datagrid
Aug 23 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
JS模拟实现哈希表及应用详解
May 04 Javascript
Vue 权限控制的两种方法(路由验证)
Aug 16 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
Nov 21 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
详谈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
实用函数2
2007/11/08 PHP
php正则校验用户名介绍
2008/07/19 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
2013/12/31 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
angularjs实现过滤并替换关键字小功能
2017/09/19 Javascript
详解Chai.js断言库API中文文档
2018/01/31 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
在vue中使用echarts(折线图的demo,markline用法)
2020/07/20 Javascript
python协程用法实例分析
2015/06/04 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
机器学习python实战之决策树
2017/11/01 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
上班迟到检讨书
2014/01/10 职场文书
手机促销活动方案
2014/02/05 职场文书
十八届三中全会学习方案
2014/02/16 职场文书
小学一年级学生评语
2014/04/22 职场文书
班主任对学生的评语
2014/04/26 职场文书
新员工入职欢迎词
2015/01/23 职场文书
党员年终个人总结
2015/02/14 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
python flask框架快速入门
2021/05/14 Python