1. 程式人生 > >微信小程式如何修改本地快取key中的單個數據

微信小程式如何修改本地快取key中的單個數據

      最近在做教師評教系統,有一個‘個人資訊’頁面中有個編輯修改郵箱的功能,本來想得很簡單,結果進坑了,搞了好久才出來。

        我想實現的效果是點選下圖左側郵箱,然後進入右側頁面,進行郵箱的修改,點選提交後跳轉到左側頁面,同時郵箱也發生改變。

      

點選‘我的’時,我讓它從控制檯打印出student快取中傳過來的資料,如下:

{no: "1635050601", name: "張三", sex: "", email: "[email protected]", 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 對應的內容。

如有問題或補充,歡迎小夥伴們留言哦~期待與你一同學習,共同進步!!!



相關推薦

程式本地快取

目前,微信給每個小程式提供了10M的本地快取空間(哎喲媽呀好大) 有了本地快取,你的小程式可以做到: 離線應用(已測試在無網路的情況下,可以操作快取資料) 流暢的使用者體驗 減少網路請求,節省伺服器資源 哪些資料適合方快取:

程式如何修改本地快取key個數

      最近在做教師評教系統,有一個‘個人資訊’頁面中有個編輯修改郵箱的功能,本來想得很簡單,結果進坑了,搞了好久才出來。        我想實現的效果是點選下圖左側郵箱,然後進入右側頁面,進行郵箱的修改,點選提交後跳轉到左側頁面,同時郵箱也發生改變。      點選‘我

關於程式圖片本地顯示真機測試上不能顯示的問題

廢話不多說直接入正題 圖片不能過大 圖片命名不能含有中文 圖片命名也不能有空格 圖片大小寫要區分 以介面或者連結形式的圖片開頭不能是大寫的HTTP結尾也不能是.PNG 上面就是我在今天碰到問題時在網上搜到的普遍解決方法 但如果問題還沒解決,怎麼辦呢?

程式API 資料快取

每個微信小程式都可以有自己的本地快取,可以通過wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)可以對本地快取進行設定、獲取和清理。同一個微信

搭建程式本地測試伺服器 json-server

1.首先需要在windows環境下安裝node.js    選擇 Windows Installer 下載對應的系統版本就行,然後一路next,這種方式安裝好以後會把環境變數也配置好了,直接在命令列下輸入 node --version //出現對應的版本號

程式修改日期

最近專案開發在做微信小程式專案,記錄一下開發過程中用到的一些小東西,實現的是一個點選增加減小日期的小東西, 貼一下效果圖 大概就是這個效果,可以點選減小日期,點選增大日期,也可以直接選擇日期,相應的判斷日期大小給出相應的提示。 貼一下程式碼 <!-- wxml -->

程式使用本地圖片在真機不顯示的問題

最近做的小程式,在真機測試發現有些本地圖片在開發工具上可以顯示,但是在真機上預覽的時候不能顯示 程式碼是這樣寫的 <view class='seat-size' wx:for="{{item}}" wx:key="index" wx:for-index="index" wx:f

程式 修改資料,並動態渲染頁面;修改陣列;

一、修改資料,並在頁面動態渲染   this.setData({     txt: '12112'   }) 二、修改陣列 var rotateClassItem = 'rotateClass['+ index + ']'; t

程式------獲取本地時間

在學習小程式過程中需要獲取當地的時間然後在插入到資料庫,首先關鍵性的問題是如何去獲取時間,畢竟微信小程式跟我們之前學習過的其他高階語言還是有些不同的,對於這個問題我個人做一個小總結。 【Demo展示】 當我們點選按鈕時即可獲取到當地時間。 【專案結構展示】 圖

程式--使用本地伺服器進行測試開發

很多做微信小程式開發的程式設計師都是有JavaEE基礎的最近群裡好多人問,小程式怎麼訪問本地的tomcat介面伺服器,在這裡記錄一下首先寫一個介面,地址是"http://localhost:8080/test"然後進行一個Post請求wx.request({ url:

程式修改資料不重新整理頁面更新資料

先將資料儲存到本地快取,如下: wx.setStorageSync('caseid', this.data.id) wx.setStorageSync('newmsg', data) //data是一個物件 在需要修改的頁面獲取本地快取的資料,如下: var newmsg = wx.

程式 修改二級頁面後返回一級頁面重新整理一級頁面

在修改二級頁面後直接返回一級頁面,並且二級頁面的資料跟一級頁面有一定的關聯性,這個時候返回就應該改變一級頁面的資料,要想實現這個功能,有以下幾個思路一、在二級頁面修改成功後,把修改的內容儲存到快取或者全域性變數裡,在一級頁面裡的show方法裡接收這個儲存的資料,並修改相應的資

程式修改data定義的值setData()

1.修改普通變數的值 data: { isShowPage1:false, count:0, }, playAgain:function(){ this.setData({//通過setData來修改 isS

怎麼搭建程式本地測試伺服器

Windows環境下 問題的提出 Mac環境 方便快捷地搭建小程式的測試伺服器 小程式對於網路請求的URL的特殊要求 不能出現埠號 不能用localhost 必須用https 主

程式——修改頁面背景

修改這個頁面的背景只需要在相應頁面的wxss頁面中新增如下程式碼: page { display: block; min-height: 100%; background-color: red; } 其中red即為你想要的顏色,你可以將red替換會為你自己的顏色

程式修改後資料庫指定的值加後臺php程式碼

小程式修改資料庫php程式碼 <?php header("Content-Type: text/html;charset=utf-8");  $type=$_GET['type']; $id=$_GET['id']; $servername = "localhos

程式 修改點選樣式

我用彈性盒子寫四個< view>< /view>. 要求.第一個< view>預設顯示已點選狀態 解決方法就是給第一個view單獨加一個叫“active”的類名,加個樣式,其他三個不加就行了。 .active{

程式——修改radio元件的大小

radio元件的樣式大小太大了,和我的文字大小不匹配,看起來很難看 於是給radio設定了width和 height ,然而並不起作用 最後是使用transform:scale(0.7); 完美

手把手教你搭建Windows環境程式本地測試伺服器

Mac環境下 問題的提出 Windows環境 方便快捷地搭建小程式的測試伺服器 小程式對於網路請求的URL的特殊要求 不能出現埠號 不能用localhost 必須用https 主要步驟 用json-server搭建簡單地伺服器,搭建出

程式 修改鍵盤的回車鍵

在input標籤中有一個confirm-type 屬性,即設定鍵盤右下角按鈕的文字,僅在type=’text’時生效 示例: <input type="text" placeholder=