欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)

 更新時間:2019年04月15日 09:02:01   作者:那個楚君呀  
這篇文章主要介紹了小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

最近在寫小程序的小項目,因為是剛上手小程序,這途中遇到了許多問題,所幸在自己的堅持不懈下基本都得到了解決,今天就記錄一下怎么設(shè)置緩存數(shù)據(jù)并且不覆蓋吧,如果有錯誤的地方麻煩大家指正,互相學習一下!

這是官方的關(guān)于緩存的說明,它會覆蓋掉之前的內(nèi)容。我還是直接上源碼吧

這是writecomment.js文件

Page({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
 },
 submit: function (event) {
  var writecomment = event.detail.value.writecomment;
  console.log(event);
  var pages = getCurrentPages();
  /***得到頁面有兩個,一個是總頁面,一個是寫的頁面,我們需要的是總頁面 */
  var page = pages[2];
  var commentlist = page.data.commentlist;
//commentlist是另一個頁面設(shè)置的數(shù)組,這里是取得那個頁面定義的commentlist
  /***獲取總頁面data里面的數(shù)組 */
  if (event.detail.value.writecomment != '') {
   commentlist.push(writecomment); /***把新的內(nèi)容放入數(shù)組中去,然后更新 */
   page.setData({
    commentlist: commentlist,
   })
  }
//這是緩存設(shè)置
 wx.setStorage({
  key: 'commentStorage',//key的值只是一個名稱,可以自己設(shè)置
  data: commentlist,
//data指的是我們要放入緩存的數(shù)值,如果是固定的數(shù)據(jù)要用“”括起來,如果是變量就直接放變量的值
 })
  console.log(commentlist);//這是為了更好觀察我自己設(shè)置的輸出語句,可以不用管
  wx.navigateBack({}) /***點擊完成后跳轉(zhuǎn)回到上一個頁面 */
 },
 
 
 onLoad: function (options) {
 },
})

接下來是writecomment.wxml文件的代碼

<!--pages/comment/writecomment/writecomment.wxml-->
<view class='write-group'>
 <form bindsubmit='submit'>
  <!-- 文本輸入框 -->
  <view class='textarea-position'>
   <textarea name='writecomment' placeholder='請輸入內(nèi)容!' maxlength='-1' auto-height="true">
   </textarea>
  </view>
  <!-- maxlength='-1'不限制輸入字符長度,auto-height="true"輸入框可以自動變化大小 -->
  
  <view class='btn-position'>
   <button type='primary' form-type='submit'>完成</button>
  </view>
 </form>
</view>

 還有樣式文件也一起放上來吧

//這是對應(yīng)的樣式文件
/* pages/comment/writecomment/writecomment.wxss */
/* 最外層樣式 */
.write-group{
 width: 100%;
 height: 1254rpx;
}
/* 輸入框?qū)訕邮?*/
.textarea-group{
 padding: 10rpx;
 width: 98%;
 height: 85%;
 overflow: scroll;
}
/* 提交表格樣式 */
.form{
 width: 100%;
 height: 100%;
}
textarea {
cursor:auto;
width:95%;
height:150px;
display:block;
position:relative;
padding: 10rpx;
}
 
.chooseImg{
 width:20%;
 height: 70rpx;
}
.image{
 width: 170rpx;
 height: 50rpx;
}
.image-btn-group{
 width: 200rpx;
 height: 50rpx;
 display: flex;
 justify-content: space-between;
}
.image-btn{
 width: 100rpx;
 height: 100rpx;
 display: flex;
 justify-content: space-between;
}
.text{
 font-size: 24rpx;
 height: 50rpx;
 width: 100rpx;
}
.textarea-position{
 overflow: scroll;
 height: 1050rpx;
 width: 100%;
}
.btn-position{
 display: fixed;
 margin-bottom: 5rpx;
}
.title {
 width: 100%;
 height: 96rpx;
 line-height: 96rpx;
 font-size: 28rpx;
 color: #989898;
}
.upload {
 width: 100%;
 margin-bottom: 30rpx;
              
}
.uploadImgBox {
 width: 212rpx;
 height: 144rpx;
 margin-right: 33rpx;
 margin-bottom: 10rpx;
 position: relative;
 background: #fff;
}
.uploadImgBox:nth-child(3n) {
 margin-right: 0;
}
.uploadPhoto {
 width: 212rpx;
 height: 144rpx;
}
.closeImg {
 width: 30rpx;
 height: 30rpx;
 border-radius: 50%;
 position: absolute;
 right: 5rpx;
 top: 5rpx;
}
 
.service {
 width: 100%;
 height: 208rpx;
 border-top: 1rpx solid #ece9e9;
 border-bottom: 1rpx solid #ece9e9;
 line-height: 30rpx;
 font-size: 26rpx;
 padding-top: 20rpx;
}
.service textarea {
 width: 100%;
 height: 100%;
}

接下來是另一個頁面,里面有獲取緩存的說明

// pages/comment/commentlist/commentlist.js
Page({
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  commentlist: [],//設(shè)置緩存的那個數(shù)組在這里定義的
 },
 writecomment: function (event) {
  wx.navigateTo({
   url: '/pages/comment/writecomment/writecomment',//在頁面函數(shù)的按鈕
  })
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
  var that = this;
  var commentlist = that.data.commentlist//取得commentlist 
//獲取緩存數(shù)據(jù)
  wx.getStorage({
   key: 'commentStorage',//這個key值要與writecomment.js里面設(shè)置的key一致
   success: function (res) {
    for (let i in res.data) {
     that.data.commentlist.push(res.data[i])//這里是把緩存數(shù)據(jù)放入到數(shù)組commentlist 里面
    };
    that.setData({
     commentlist: commentlist//刷新commentlist 
    })
   },
  })
  that.setData({
   options: options,
  });
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
  */
 onReady: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面顯示
  */
 onShow: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面隱藏
  */
 onHide: function () {
 },
 /**
  * 生命周期函數(shù)--監(jiān)聽頁面卸載
  */
 onUnload: function () {
 },
 /**
  * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
  */
 onPullDownRefresh: function () {
 },
 /**
  * 頁面上拉觸底事件的處理函數(shù)
  */
 onReachBottom: function () {
 },
 /**
  * 用戶點擊右上角分享
  */
 onShareAppMessage: function () {
 }
})

commentlist.wxml文件

<!--pages/comment/commentlist/commentlist.wxml-->
<view class='p-list-group'>
 <view class='p-list-group-more'>
  <!-- 輸出輸入頁面輸入的內(nèi)容 -->
  <view class='p-list' wx:for='{{commentlist}}' wx:key="{{index}}">{{item}}</view>
 </view>
 
 <!-- 寫計劃按鈕與搜索按鈕 -->
 <view class='cardclass'>
  <button class='btn-search' open-type='' bindtap='search' style="background-image:url(/images/plan/icon-search-1.png);"> 搜索</button>
  <!-- 寫計劃 -->
 <button class='btn-write' open-type='primary' bindtap='writecomment' style="background-image:url(/images/plan/icon-pen-1.png);">評論 </button>
 </view>
</view>

樣式文件

/* pages/comment/commentlist/commentlist.wxss */
.p-list-group{
 margin-right: 10rpx;
 margin-left: 10rpx;
 overflow: scroll;
 width:98%;
 right:1rpx;
}
.p-list-group-more{
 right:1rpx;
 overflow: scroll;
 height:1000rpx;
 width:100%;
 margin-top: 10rpx;
}
.p-list{
 text-overflow: ellipsis;/***文本太長顯示省略號*/
 overflow: scroll;
 width:99%;
 border: 1px solid #ccc;
 margin-right: 10rpx;
 margin-bottom: 20rpx;
 height: 100rpx;
}
.btn-search{
 position: fixed;
 bottom: 5rpx;
 width: 30%;
 background-size: 45rpx 45rpx;
 background-repeat:no-repeat;
}
.btn-write{
 position: fixed;
 bottom: 5rpx;
 width: 30%;
 background-size: 45rpx 45rpx;
 background-repeat:no-repeat;
 right:10rpx;
}
.cardclass{
 display:flex;
 font-size:18rpx;
 justify-content: space-between;
 bottom: 5rpx;
 height:25rpx;
}
.image-list{
 width:40rpx;
 height:30%;
}

好啦,我做的基本就這樣,代碼有點多,關(guān)鍵就是wx.setStorage()和wx.getStorage(),為了方便我還是把兩個頁面完整代碼全部放這里了

以上所述是小編給大家介紹的小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 創(chuàng)建一般js對象的幾種方式

    創(chuàng)建一般js對象的幾種方式

    本文主要介紹了創(chuàng)建一般js對象的幾種方式。具有很好的參考價值,下面跟著小編一起來看下吧
    2017-01-01
  • JavaScript中innerHTML,innerText,outerHTML的用法及區(qū)別

    JavaScript中innerHTML,innerText,outerHTML的用法及區(qū)別

    在javascript中如果我們要獲取對象內(nèi)容,js為我們提供了三種方法outerhtml、innerhtml和innertext,但他們之間具體怎么使用與具體的區(qū)別在哪里,可能很多人不知道吧,接下來跟著小編一起來學習innerHTML,innerText,outerHTML的用法及區(qū)別吧。
    2015-09-09
  • JavaScript實現(xiàn)簡單的雙色球(實例講解)

    JavaScript實現(xiàn)簡單的雙色球(實例講解)

    下面小編就為大家?guī)硪黄狫avaScript實現(xiàn)簡單的雙色球(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-07-07
  • JavaScript根據(jù)CSS的Media Queries來判斷瀏覽設(shè)備的方法

    JavaScript根據(jù)CSS的Media Queries來判斷瀏覽設(shè)備的方法

    這篇文章主要介紹了JavaScript根據(jù)CSS的Media Queries來判斷瀏覽設(shè)備的方法,主要思路是通過CSS Media Queries改變一個類的某個屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下
    2016-05-05
  • 基于JS實現(xiàn)EOS隱藏錯誤提示層代碼

    基于JS實現(xiàn)EOS隱藏錯誤提示層代碼

    本文給大家分享一段代碼基于js實現(xiàn)EOS隱藏錯誤提示層,對eos隱藏提示層的相關(guān)知識感興趣的朋友一起學習吧
    2016-04-04
  • 細說webpack源碼之compile流程-rules參數(shù)處理技巧(2)

    細說webpack源碼之compile流程-rules參數(shù)處理技巧(2)

    這篇文章主要介紹了webpack源碼之compile流程-rules參數(shù)處理技巧的相關(guān)知識,需要的朋友參考下吧
    2017-12-12
  • 小程序開發(fā)之uniapp引入iconfont圖標以及使用方式

    小程序開發(fā)之uniapp引入iconfont圖標以及使用方式

    uniapp本身是有icon組件的,但由于icon組件各端表現(xiàn)存在差異,所以我們可以通過使用iconfont的字體圖標來彌補這些差異,下面這篇文章主要給大家介紹了關(guān)于小程序開發(fā)之uniapp引入iconfont圖標以及使用方式的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • 用javascript實現(xiàn)自定義標簽

    用javascript實現(xiàn)自定義標簽

    用javascript實現(xiàn)自定義標簽...
    2007-05-05
  • php常見的頁面跳轉(zhuǎn)方法匯總

    php常見的頁面跳轉(zhuǎn)方法匯總

    Web系統(tǒng)中,從一個網(wǎng)頁跳轉(zhuǎn)到另一個網(wǎng)頁,是LAMP項目中最常用的技術(shù)之一。頁面跳轉(zhuǎn)可能是由于用戶單擊鏈接、按鈕等引發(fā)的,也可能是系統(tǒng)自動產(chǎn)生的。 此處介紹PHP中常用的實現(xiàn)頁面自動跳轉(zhuǎn)的方法。
    2015-04-04
  • js實現(xiàn)踩五彩塊游戲

    js實現(xiàn)踩五彩塊游戲

    這篇文章主要為大家詳細介紹了js實現(xiàn)踩五彩塊游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-02-02

最新評論