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


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 相关文章推荐
javascript动态加载三
Aug 22 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
JS+Canvas 实现下雨下雪效果
May 18 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
浅谈js for循环输出i为同一值的问题
Mar 01 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
node.js 利用流实现读写同步,边读边写的方法
Sep 11 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
详解react阻止无效重渲染的多种方式
Dec 11 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
VUE项目中加载已保存的笔记实例方法
Sep 14 Javascript
详解React 元素渲染
Jul 07 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 session处理的定制
2009/03/16 PHP
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
FF IE兼容性的修改小结
2009/09/02 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
jQuery自定义组件(导入组件)
2016/11/08 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
React中如何引入Angular组件详解
2018/08/09 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
webpack4.0 入门实践教程
2018/10/08 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
简单了解微信小程序的目录结构
2019/07/01 Javascript
微信小程序实现传递多个参数与事件处理
2019/08/12 Javascript
写一个Vue loading 插件
2020/11/09 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
Python3 入门教程 简单但比较不错
2009/11/29 Python
python多维数组切片方法
2018/04/13 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
python异常触发及自定义异常类解析
2019/08/06 Python
python实现的生成word文档功能示例
2019/08/23 Python
python安装gdal的两种方法
2019/10/29 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
瑞典香水、须后水和美容产品购物网站:Parfym-Klick.se
2019/12/29 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
explicit和implicit的含义
2012/11/15 面试题
医药营销专业个人自荐信
2013/09/29 职场文书
酒店开业庆典主持词
2014/03/21 职场文书
购房意向书
2014/04/01 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
linux下安装redis图文详细步骤
2021/12/04 Redis
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers