微信小程序如何修改本地缓存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 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
再谈ie和firefox下的document.all属性
Oct 21 Javascript
js确认删除对话框效果的示例代码
Feb 20 Javascript
JavaScript简单下拉菜单特效
Sep 13 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
vue项目实现github在线预览功能
Jun 20 Javascript
写gulp遇到的ES6问题详解
Dec 03 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
IDEA安装vue插件图文详解
Sep 26 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
微信小程序拖拽排序列表的示例代码
Jul 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数组
2006/10/09 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
如何批量清理系统临时文件(语言:C#、 C/C++、 php 、python 、java )
2016/02/01 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
HTML5之lang属性与dir属性的详解
2013/06/19 Javascript
js复制网页内容并兼容各主流浏览器的代码
2013/12/17 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
js字符串引用的两种方式(必看)
2016/09/18 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
Python Django 简单分页的实现代码解析
2019/08/21 Python
Pytorch之保存读取模型实例
2019/12/30 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Numpy数组的广播机制的实现
2020/11/03 Python
python tkinter实现连连看游戏
2020/11/16 Python
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5页面直接调用百度地图API获取当前位置直接导航目的地的实现代码
2018/03/02 HTML / CSS
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
函授药学自我鉴定
2014/02/07 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
挂科检讨书范文
2014/02/20 职场文书
竞聘书模板
2014/03/31 职场文书
学生检讨书如何写
2014/10/30 职场文书
裁员通知
2015/04/25 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书