微信小程序如何修改本地缓存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 相关文章推荐
event对象的方法 兼容多浏览器
Jun 27 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
Javascript Throttle & Debounce应用介绍
Mar 19 Javascript
js innerHTML 改变div内容的方法
Aug 03 Javascript
JsRender for object语法简介
Oct 31 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
smarty中常用方法实例总结
2015/08/07 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP使用 Imagick 扩展实现图片合成,圆角处理功能示例
2019/09/09 PHP
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JS实现的5级联动Select下拉选择框实例
2015/08/17 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
wap手机端解决返回上一页的js实例
2016/12/08 Javascript
Bootstrap选项卡学习笔记分享
2017/02/13 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
详解操作虚拟dom模拟react视图渲染
2018/07/25 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
Django框架模板介绍
2019/01/15 Python
Python如何基于rsa模块实现非对称加密与解密
2020/01/03 Python
Python基于yaml文件配置logging日志过程解析
2020/06/23 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
个人收入证明范本
2014/01/12 职场文书
《恐龙》教学反思
2014/04/27 职场文书
2015年电话客服工作总结
2015/05/18 职场文书
vue+spring boot实现校验码功能
2021/05/27 Vue.js