微信小程序如何修改本地缓存key中单个数据的详解


Posted in Javascript onApril 26, 2019

最近在做教师评教系统,有一个‘个人信息'页面中有个编辑修改邮箱的功能,本来想得很简单,结果进坑了,搞了好久才出来。

我想实现的效果是点击下图左侧邮箱,然后进入右侧页面,进行邮箱的修改,点击提交后跳转到左侧页面,同时邮箱也发生改变。

微信小程序如何修改本地缓存key中单个数据的详解

点击‘我的'时,我让它从控制台打印出student缓存中传过来的数据,如下:

{no: "1635050601", name: "张三", sex: "", email: "123@qq.com", classid: "100000-1602", …}
classid:"100000-1602"
classname:"16级PHP2"
departmentid:"100000"
departmentname:"软件学院"
name:"张三"
no:"1635050601"
sex:""

然后我添加邮箱后,后台接口写了方法让email的值直接存到student中,但是如果初次添加email的话可以实现,第二次修改email的话,就得想想该怎么从student里只修改email的值。

//表单提交
 formSubmit: function (e) {
 console.log(e.detail.value);
 var pwd = e.detail.value.pwd;
 var email = e.detail.value.email;
 if (pwd == '') {
  wx.showToast({
  title: '密码不能为空',
  icon: 'none',
  duration: 1000,
  })
 }else if (email == '') {
  wx.showToast({
  title: '邮箱不能为空',
  icon: 'none',
  duration: 1000,
  })
 }else {
  //post方式提交
  wx.request({
  url: app.globalData.url.bindemail,
  method: "POST",
  data: {
   no: this.data.no,
   pwd: pwd,
   email: email
  },
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  success: function (res) {
   // console.log(res);
   if(res.data.error == true){
   wx.showToast({
    title: res.data.msg,
    icon: 'none',
    duration: 1000,
   })
   }else{
   //修改email
   var _student = wx.getStorageSync('student');
   _student.email = email;
   wx.setStorageSync('student', _student);
   
   wx.showToast({
    title: res.data.msg,
    icon: 'success',
    duration: 2000,
    success: function () {
    setTimeout(function () {
     wx.reLaunch({
     url: '../myinfo/myinfo',
     })
    }, 2000)
    }
   })
   }
  },
  })
 }
 },

这里我们用下边方法从student里只修改email的值。

//修改email
   var _student = wx.getStorageSync('student');
   _student.email = email;
   wx.setStorageSync('student', _student);

wx.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

wx.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

如有问题或补充,欢迎小伙伴们留言哦~期待与你一同学习,共同进步!!!

以上所述是小编给大家介绍的微信小程序如何修改本地缓存key中单个数据详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
编辑浪子版表单验证类
May 12 Javascript
jquery事件重复绑定的快速解决方法
Jan 03 Javascript
jQuery中innerWidth()方法用法实例
Jan 19 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
angular.js指令中的controller、compile与link函数的不同之处
May 10 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 Javascript
js验证身份证号码记录的方法
Apr 26 #Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 #Javascript
react高阶组件添加和删除props
Apr 26 #Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 #Javascript
vue 进阶之实现父子组件间的传值
Apr 26 #Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
Apr 26 #Javascript
配置一个vue3.0项目的完整步骤
Apr 26 #Javascript
You might like
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
文本框输入时 实现自动提示(像百度、google一样)
2012/04/05 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jQuery下拉美化搜索表单效果代码分享
2015/08/25 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
Javascript 闭包详解及实例代码
2016/11/30 Javascript
Bootstrap基本样式学习笔记之表单(3)
2016/12/07 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
详解webpack es6 to es5支持配置
2017/05/04 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
推荐10款扩展Web表单的JS插件
2017/12/25 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
2020/10/30 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python判断、获取一张图片主色调的2个实例
2014/04/10 Python
python实现八大排序算法(2)
2017/09/14 Python
python函数定义和调用过程详解
2020/02/09 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
纽约著名的服装辅料来源:M&J Trimming
2017/07/26 全球购物
总经理助理职责
2014/02/04 职场文书
住房租房协议书
2014/08/20 职场文书
小学教研工作总结2015
2015/05/13 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
PHP策略模式写法
2021/04/01 PHP
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL