微信小程序学习笔记之本地数据缓存功能详解

 更新时间:2019年03月29日 11:23:18   作者:李维山  
这篇文章主要介绍了微信小程序学习笔记之本地数据缓存功能,结合实例形式分析了微信小程序wx.setStorage、wx.getStorage以及wx.removeStorage、wx.clearStorage针对数据缓存的存取、删除等相关操作技巧,需要的朋友可以参考下

本文实例讲述了微信小程序学习笔记之本地数据缓存功能。分享给大家供大家参考,具体如下:

前面介绍了微信小程序获取位置信息操作。这里再来介绍一下微信小程序的本地数据缓存功能。

【将数据存储在本地缓存】wx.setStorage

【读取本地缓存】wx.getStorage

以手机号+密码登录为例,把登录成功返回的token值存储在本地缓存中,然后读取缓存中的token:

login.php:

<?php 
  header("Content-type:text/html;charset=utf-8");
  $arr = array("state"=>0,"data"=>array(),"msg"=>'');
  $phone = $_POST['phone'];
  $password = $_POST['password'];
  if($phone && $password){
	//省略验证......

	//返回登录token
	$tokenstr = 'liweishan666';
	$token = $phone.time().$tokenstr;//省略加密

	$arr['state'] = 1;
	$arr['msg'] = '登录成功';
	$arr['data']['token'] = $token;
  }else{
	$arr['msg'] = '参数错误';
  }
  echo json_encode($arr);
  die;
	

login.wxml:

<form bindsubmit="formSubmit" bindreset="formReset">
 <view>
  手机号:<input type="text" name="phone" placeholder="请输入账号" confirm-type="done" />
  密码:<input password type="number" name="password" placeholder="请输入6位密码" maxlength="6" />
 </view>
 <view class="btn-area">
  <button formType="submit">登录</button>
 </view>

 <view class="btn-area">
  <button bindtap="gettoken">读取缓存token</button>
 </view>

 <view class="btn-area">{{token}}</view>
</form>

login.js:

Page({
 formSubmit: function (e) {
  wx.request({
   url: 'https://www.msllws.top/login.php',
   data: {
    'phone': e.detail.value.phone,
    'password': e.detail.value.password
   },
   method: 'POST',
   header: {
    'Content-Type': 'application/x-www-form-urlencoded'
   },
   success: function (res) {
    console.log(res.data);
    //以键值对的形式存储到本地缓存
    wx.setStorage({
     key: "token",
     data: res.data.data.token
    })
   },
   fail: function () { },
   complete: function () { }
  })
 },

 gettoken: function (e) {
  var that = this
  wx.getStorage({
   key: 'token',
   success: function (res) {
    that.setData({'token': res.data})
   },
   fail: function () { },
   complete: function () { }
  })
 }
})

实现缓存的存储和读取:

【从缓存中移除指定数据】wx.removeStorage

wx.removeStorage({
 key: 'token',
 success (res) {
  console.log(res.data)
 } 
})

 【清除全部缓存数据】wx.clearStorage

wx.clearStorage()

希望本文所述对大家微信小程序开发有所帮助。

相关文章

  • JS设置获取cookies的方法

    JS设置获取cookies的方法

    这篇文章主要介绍了JS设置获取cookies的方法,有需要的朋友可以参考一下
    2014-01-01
  • JavaScript编制留言簿程序代码

    JavaScript编制留言簿程序代码

    也许你有一个很酷的主页,很希望与人分享。同时,你希望访问你主页的人能对你的主页提供一些意见和建议,或者你对某个主题感兴趣,而希望客人也许能给你一帮助,这就要用到留言簿。留言簿使得你能与每一个访问你主页的人交换信息。
    2008-09-09
  • 基于JavaScript实现瀑布流布局(二)

    基于JavaScript实现瀑布流布局(二)

    这篇文章主要介绍了原生JavaScript实现瀑布流布局的相关资料,实现鼠标下拉图片自动加载效果,和百度图片效果类似,需要的朋友可以参考下
    2016-01-01
  • javascript操作数组详解

    javascript操作数组详解

    这篇文章主要详细介绍了javascript操作数组的方法以及示例,需要的朋友可以参考下
    2014-12-12
  • JS实现数组扁平化的8种方式总结

    JS实现数组扁平化的8种方式总结

    数组扁平化指的是将一个多层嵌套的数组,处理成只有一层的数组,本文为大家整理了8个常用的JS实现数组扁平化的方法,希望对大家有所帮助
    2023-08-08
  • JavaScript文件的同步和异步加载的实现代码

    JavaScript文件的同步和异步加载的实现代码

    本篇文章主要介绍了JavaScript文件的同步和异步加载的实现代码,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • 原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    原生JS实现风箱式demo,并封装了一个运动框架(实例代码)

    下面小编就为大家带来一篇原生JS实现风箱式demo,并封装了一个运动框架(实例代码)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • JS数据结构与算法中的队列结构详解

    JS数据结构与算法中的队列结构详解

    队列指的是一种受限的线性表,先进先出,今天通过本文带领大家认识队列及队列的应用,对JS数据结构与算法-队列结构相关知识感兴趣的朋友一起看看吧
    2022-11-11
  • 用js实现用户注册功能

    用js实现用户注册功能

    这篇文章主要为大家详细介绍了用js实现用户注册的简洁版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • JavaScript捕捉事件和阻止冒泡事件实例分析

    JavaScript捕捉事件和阻止冒泡事件实例分析

    这篇文章主要介绍了JavaScript捕捉事件和阻止冒泡事件,结合实例形式分析了冒泡的原理及javascript阻止冒泡的相关操作技巧,需要的朋友可以参考下
    2018-08-08

最新评论