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


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 相关文章推荐
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
Apr 27 Javascript
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 Javascript
详解有关easyUI的拖动操作中droppable,draggable用法例子
Jun 03 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
Angular2的管道Pipe的使用方法
Nov 07 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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
PHP文件操作详解
2016/12/30 PHP
Yii2设置默认控制器的两种方法
2017/05/19 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
jQuery 学习6 操纵元素显示效果的函数
2010/02/07 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
jquery中文乱码的多种解决方法
2013/06/21 Javascript
鼠标左键单击冲突的问题解决方法(防止冒泡)
2014/05/14 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
js实现从中间开始往上下展开网页窗口的方法
2015/03/02 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
Hammer.js+轮播原理实现简洁的滑屏功能
2016/02/02 Javascript
jQuery操作cookie
2016/08/08 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
jQuery事件用法详解
2016/10/06 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
了解JavaScript表单操作和表单域
2019/05/27 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
python自定义类并使用的方法
2015/05/07 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Python3 pyecharts生成Html文件柱状图及折线图代码实例
2020/09/29 Python
Django Auth用户认证组件实现代码
2020/10/13 Python
python Selenium 库的使用技巧
2020/10/16 Python
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
Turnbull & Asser官网:英国皇室御用的顶级定制衬衫
2019/01/31 全球购物
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
用C#语言写出在本地创建一个UDP接收端口的具体过程
2016/02/22 面试题
个人应聘自我评价分享
2013/11/18 职场文书
初中生学习生活的自我评价
2013/11/20 职场文书
出国留学经济担保书
2014/04/01 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
人事代理委托书
2014/09/27 职场文书
安全生产标语大全
2014/10/06 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
社区服务理念口号
2015/12/25 职场文书