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


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 继承实例分析
Nov 04 Javascript
javascript Keycode对照表
Oct 24 Javascript
javascript 面向对象全新理练之继承与多态
Dec 03 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
JS如何判断json是否为空
Jul 06 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
Vue v-for中的 input 或 select的值发生改变时触发事件操作
Aug 31 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中MD5函数使用实例代码
2008/06/07 PHP
php计算十二星座的函数代码
2012/08/21 PHP
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
php动态绑定变量的用法
2015/06/16 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
js常用函数 不错
2006/09/08 Javascript
ExtJs事件机制基本代码模型和流程解析
2010/10/24 Javascript
浏览器中url存储的JavaScript实现
2015/07/07 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
asp知识整理笔记3(问答模式)
2015/09/27 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
python异步任务队列示例
2014/04/01 Python
简单的Python的curses库使用教程
2015/04/11 Python
详解Python的Django框架中的中间件
2015/07/24 Python
学习python 之编写简单乘法运算题
2016/02/27 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python中的Numpy矩阵操作
2018/08/12 Python
解决pip install xxx报错SyntaxError: invalid syntax的问题
2018/11/30 Python
Python字符串逆序输出的实例讲解
2019/02/16 Python
Jupyter Notebook折叠输出的内容实例
2020/04/22 Python
班级德育工作实施方案
2014/02/21 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
社团活动总结怎么写
2014/06/30 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
读书笔记格式
2015/07/02 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python