最近在写小程序的小项目，因为是刚上手小程序，这途中遇到了许多问题，所幸在自己的坚持不懈下基本都得到了解决，今天就记录一下怎么设置缓存数据并且不覆盖吧，如果有错误的地方麻烦大家指正，互相学习一下！
这是官方的关于缓存的说明，它会覆盖掉之前的内容。我还是直接上源码吧
这是writecomment.js文件
Page({
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是另一个页面设置的数组，这里是取得那个页面定义的commentlist
if (event.detail.value.writecomment != '') {
commentlist.push(writecomment);
page.setData({
commentlist: commentlist,
})
}
//这是缓存设置
wx.setStorage({
key: 'commentStorage',//key的值只是一个名称，可以自己设置
data: commentlist,
//data指的是我们要放入缓存的数值，如果是固定的数据要用“”括起来，如果是变量就直接放变量的值
})
console.log(commentlist);//这是为了更好观察我自己设置的输出语句，可以不用管
wx.navigateBack({})
},
onLoad: function (options) {
},
})
接下来是writecomment.wxml文件的代码
还有样式文件也一起放上来吧
//这是对应的样式文件
.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;
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({
data: {
commentlist: [],//设置缓存的那个数组在这里定义的
},
writecomment: function (event) {
wx.navigateTo({
url: '/pages/comment/writecomment/writecomment',//在页面函数的按钮
})
},
onLoad: function (options) {
var that = this;
var commentlist = that.data.commentlist//取得commentlist
//获取缓存数据
wx.getStorage({
key: 'commentStorage',//这个key值要与writecomment.js里面设置的key一致
success: function (res) {
for (let i in res.data) {
that.data.commentlist.push(res.data[i])//这里是把缓存数据放入到数组commentlist 里面
};
that.setData({
commentlist: commentlist//刷新commentlist
})
},
})
that.setData({
options: options,
});
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
},
onUnload: function () {
},
onPullDownRefresh: function () {
},
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
commentlist.wxml文件
{{item}}
样式文件
.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%;
}
好啦，我做的基本就这样，代码有点多，关键就是wx.setStorage()和wx.getStorage(),为了方便我还是把两个页面完整代码全部放这里了
以上所述是小编给大家介绍的小程序设置缓存并且不覆盖原有数据详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
