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


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 相关文章推荐
Jquery插件之打造自定义的select标签
Nov 30 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
Bootstrap 布局组件(全)
Jul 18 Javascript
Map.vue基于百度地图组件重构笔记分享
Apr 17 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 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后台如何避免用户直接进入方法实例
2013/10/15 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
Centos 6.5系统下编译安装PHP 7.0.13的方法
2016/12/19 PHP
js DOM模型操作
2009/12/28 Javascript
iframe自适应宽度、高度 ie6 7 8,firefox 3.86下测试通过
2010/07/29 Javascript
node.js中的fs.openSync方法使用说明
2014/12/17 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
angularjs 缓存的使用详解
2018/03/19 Javascript
JS使用数组实现的队列功能示例
2019/03/04 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
在vue中使用Base64转码的案例
2020/08/07 Javascript
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
Django框架实现的简单分页功能示例
2018/12/04 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Python中利用LSTM模型进行时间序列预测分析的实现
2019/07/26 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
python next()和iter()函数原理解析
2020/02/07 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
New Balance英国官方网站:始于1906年,百年慢跑品牌
2016/12/07 全球购物
领导调研接待方案
2014/02/27 职场文书
社区好人好事材料
2014/12/26 职场文书
卫生主题班会
2015/08/14 职场文书
高一语文教学反思
2016/02/16 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
Java工作中实用的代码优化技巧分享
2022/04/21 Java/Android