详解小程序设置缓存并且不覆盖原有数据

Page({
 /
   页面的初始数据
  /
 data: {
 },
 submit: function (event) {
  var writement = event.detail.value.writement;
  console.log(event);
  var pages = getCurrentPages();
  /得到页面有两个，一个是总页面，一个是写的页面，我们需要的是总页面 /
  var page = pages[2];
  var mentlist = page.data.mentlist;
//mentlist是另一个页面设置的数组，这里是取得那个页面定义的mentlist
  /获取总页面data里面的数组 /
  if (event.detail.value.writement != '') {
   mentlist.push(writement); /把新的内容放入数组中去，然后更新 /
   page.setData({
    mentlist: mentlist,
   })
  }
//这是缓存设置
 wx.setStorage({
  key: 'mentStorage',//key的值只是一个名称，可以自己设置
  data: mentlist,
//data指的是我们要放入缓存的数值，如果是固定的数据要用“”括起来，如果是变量就直接放变量的值
 })
  console.log(mentlist);//这是为了更好观察我自己设置的输出语句，可以不用管
  wx.navigateBack({}) /点击完成后跳转回到上一个页面 /
 },
 
 
 onLoad: function (options) {
 },
})

<!--pages/ment/writement/writement.wxml-->
<view class='write-group'>
 <form bindsubmit='submit'>
  <!-- 文本输入框 -->
  <view class='textarea-position'>
   <textarea name='writement' placeholder='请输入内容！' 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>

//这是对应的样式文件
/ pages/ment/writement/writement.wxss /
/ 最外层样式 /
.write-group{
 width: 100%;
 height: 1254rpx;
}
/ 输入框层样式 /
.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;
 : 5rpx;
}
 
.service {
 width: 100%;
 height: 208rpx;
 border-: 1rpx solid #ece9e9;
 border-bottom: 1rpx solid #ece9e9;
 line-height: 30rpx;
 font-size: 26rpx;
 padding-: 20rpx;
}
.service textarea {
 width: 100%;
 height: 100%;
}

// pages/ment/mentlist/mentlist.js
Page({
 /
   页面的初始数据
  /
 data: {
  mentlist: [],//设置缓存的那个数组在这里定义的
 },
 writement: function (event) {
  wx.navigateTo({
   url: '/pages/ment/writement/writement',//在页面函数的按钮
  })
 },
 /
   生命周期函数--监听页面加载
  /
 onLoad: function (options) {
  var that = this;
  var mentlist = that.data.mentlist//取得mentlist 
//获取缓存数据
  wx.getStorage({
   key: 'mentStorage',//这个key值要与writement.js里面设置的key一致
   suess: function (res) {
    for (let i in res.data) {
     that.data.mentlist.push(res.data[i])//这里是把缓存数据放入到数组mentlist 里面
    };
    that.setData({
     mentlist: mentlist//刷新mentlist 
    })
   },
  })
  that.setData({
   options: options,
  });
 },
 /
   生命周期函数--监听页面初次渲染完成
  /
 onReady: function () {
 },
 /
   生命周期函数--监听页面显示
  /
 onShow: function () {
 },
 /
   生命周期函数--监听页面隐藏
  /
 onHide: function () {
 },
 /
   生命周期函数--监听页面卸载
  /
 onUnload: function () {
 },
 /
   页面相关事件处理函数--监听用户下拉动作
  /
 onPullDownRefresh: function () {
 },
 /
   页面上拉触底事件的处理函数
  /
 onReachBottom: function () {
 },
 /
   用户点击右上角分享
  /
 onShareAppMessage: function () {
 }
})

<!--pages/ment/mentlist/mentlist.wxml-->
<view class='p-list-group'>
 <view class='p-list-group-more'>
  <!-- 输出输入页面输入的内容 -->
  <view class='p-list' wx:for='{{mentlist}}' 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='writement' style="background-image:url(/images/plan/icon-pen-1.png);">评论 </button>
 </view>
</view>

/ pages/ment/mentlist/mentlist.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-: 10rpx;
}
.p-list{
 text-overflow: ellipsis;/文本太长显示省略号/
 overflow: scroll;
 width:99%;
 border: 1px solid #c;
 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%;
}