解释小程序设置缓存和不覆盖原始数据

最近在写一个小程序的小项目，因为刚开始做小程序，途中遇到很多问题。好在有我的毅力，基本解决了。让我们记录如何设置缓存数据，今天就不介绍了。如有错误，请指正，互相学习！

这是缓存的官方描述，会覆盖之前的内容。我最好直接进入源代码

这是writecomment.js文件

page({/* * * page */data : { }的初始数据，submit:函数(事件){var writecomment=event。detail . value . write comment；console.log(事件)；var pages=getCurrentPages()；/* * *有两页，一页是总页，一页是书写页。我们需要的是总页数*/var page=pages[2]；var comment list=page . data.comment list；//commentlist是由另一页设置的数组。在这里，获取由该页面定义的commentlist获取总页面数据*/if(事件)中的数组。detail.value.writecomment！=' '){ comment list . push(write comment)；/* * *将新内容放入数组并更新*/page . setdata({ comment list : comment list，})}//这是缓存设置wx . setstorage({ key 3360 ' comment storage '，key的值只是一个名称。您可以自行设置data:评论列表。//数据是指我们要放入缓存的值。如果是固定数据，应该用""，如果是变量，会直接放变量的值})console . log(comment list)；//这是为了更好的观察自己设置的输出语句。可以跳过wx.navigateBack({}) /***点击*/}后跳回上一页，onload :函数(选项){}，})接下来是writecomment.wxml文件的代码。

！-pages/comment/write comment/write comment . wxml-view class=' write-group ' form bind submit=' submit '！-文本输入框-视图类=' text area-position ' text area name=' write comment '占位符='请输入内容！'maxlength='-1 '自动高度='true' /textarea /view！-maxlength='-1 '不限制输入字符的长度，并且auto-height='true '输入框可以自动改变其大小-view class=' BTN-position ' button type=' primary ' form-type=' submit ' finish/button/view/form/view和样式文件也被放上去。

//这是对应的样式文件/*页面/评论/写评论/写评论。wxss *//*最外层样式*/.写入组{宽度： 100%；高度： 1254rpx}/*输入框层样式*/.文本区-组{ padd : 10 rpx宽度： 98%;高度： 85%;飞越：卷轴；}/* 提交表格样式*/.表单{宽度： 100%；高度： 100%;} textarea { cursor:auto宽度：95%;高度：150 px显示：块；位置：相对；padding: 10rpx }。选择IMg { width :20%；高度： 70rpx}。图像{ width: 170rpx高度： 50 rpx}.图像-BTN-组{宽度： 200 rpx高度： 50 rpxdisplay : flex justice-content :空格；}.图像-BTN {宽度： 100 rpx高度： 100 rpxdisplay : flex justice-content :空格；}.text { font-size : 24 rpx高度： 50 rpx宽度： 100 rpx}.文本区域-位置{溢出： }滚动；高度： 1050 rpx宽度： 100%;}.BTN位置{显示：固定；保证金-底部： 5 rpx}.标题{宽度： 100%；高度： 96rpx线高： 96rpxfont-size : 28 rpxcolor: # 989898}。上传{宽度： 100%；保证金-底部： 30 rpx}.uploadImgBox { width : 212 rpxhirth : 144 rpxmargin-right : 33rpx；保证金-底部： 10 rpx相对位置：背景# fff}。uploadimgbox : th-child(3n){ margin-right : 0；}.upload photo { width : 212 rpxhway : 144 rpx }。closeImg { width : 30 rpx h8 : 30 rpx边界半径： 50%;绝对位置：right: 5rpxtop: 5rpx}。服务{宽度： 100%；高度： 208 rpx border-top : 1px实心# ece9e9border-bottom: 1rpx实心# ece9e9线高： 30 rpxfont-size : 26rpx衬垫-顶部： 20 rpx}.服务文本区域{宽度： 100%；高度： 100%;}接下来是另一个页面，里面有获取缓存的说明

//页面/评论/评论列表/评论列表。JSpage({/* * *页面的初始数据*/data: { commentlist: []，//设置缓存的那个数组在这里定义的}，writecomment:函数（事件){ wx。navigateto({ URL : '/page/comment/write comment/write comment '，//在页面函数的按钮}) }, /** * 生命周期函数-监听页面加载*/onLoad:函数（选项){ var=thisvar注释列表=那个。数据。评论列表/取得评论列表/获取缓存数据wx。getstorage({ key : ' commentStorage '，//这个键值要与writecomment.js里面设置的键一致成功：函数让我输入数据。数据。评论列表。push(RES . data[I])//这里是把缓存数据放入到数组评论列表里面};那个。setdata({ comment list : comment list//刷新commentlist }) }，})那。setdata({ options 3360 options，})；}, /** * 生命周期函数-监听页面初次渲染完成*/onReady:函数(){ },/** *生命周期函数-监听页面显示*/OnShaw :函数(){ },/** *生命周期函数-监听页面隐藏*/onHide:函数(){ },/** *生命周期函数-监听页面卸载*/onUnload:函数(){ },/** *页面相关事件处理函数-监听用户下拉动作*/onpulldownlrefresh :函数(){ },/** *页面上拉触底事件的处理函数*/onReachBottom:函数(){ },/** *用户点击右上角分享*/onsharepmessage :函数(){ }})commentlist.wxml文件

！-页面/评论/评论列表/评论列表。wxml-view class=' p-list-group ' view class=' p-list-group-more '！-输出输入页面输入的内容-view class=' p-list ' wx : for=' { { comment list } } ' wx : key=' { { index } } ' { { item } }/view/view！-写计划按钮与搜索按钮-view class=' card class ' button class=' BTN-search ' open-type=' bind tap=' search ' style=' background-image : URL(/images/plan/icon-search-1)。巴布亚新几内亚)；'搜索/button！-写计划-button class=' BTN-write ' open-type=' primary ' bind tap=' write comment ' style=' background-image : URL(/images/plan/icon-pen-1。巴布亚新几内亚)；'评论/按钮/视图/视图样式文件

/*页面/评论/评论列表/评论列表。wxss */.p-list-group { margin-right : 10 rpx；左边距左： 10rpx飞越：卷轴；宽度：98%;right:1rpx}。p-list-group-more { right :1 rpx；飞越：卷轴；高度：1000rpx宽度：100%;边距-top : 10 rpx；}.p-list{ text-overflow:省略号；/***文本太长显示省略号*/overflow:滚动；宽度：99%;border: 1px固体# ccc右边距： 10 rpx保证金-底部： 20 rpx高度： 100 rpx}.btn-search{ position:固定；bottom: 5rpx宽度： 30%;背景尺寸尺寸： 45rpx 45rpx背景-重复：不重复；}.BTN-写{ position:固定；bottom: 5rpx宽度： 30%;背景尺寸尺寸： 45rpx 45rpx背景-重复：不重复；right:10rpx}。card class { display : flex font-size :18 rpx；正义-内容：空格；bottom : 5rpx h8 :25 rpx }。图像列表{ width:40rpx高度：30%;}好啦，我做的基本就这样，代码有点多，关键就是wx.setStorage()和wx.getStorage()，为了方便我还是把两个页面完整代码全部放这里了

以上所述是小编给大家介绍的小程序设置缓存并且不覆盖原有数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！