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

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) {
 },
})

<!--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 () {
 }
})

<!--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' > 搜索</button>
  <!-- 寫計劃 -->
 <button class='btn-write' open-type='primary' bindtap='writecomment' >評論 </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%;
}