這篇文章主要介紹了小程序設置緩存並且不覆蓋原有數據，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨着小編來一起學習學習吧
最近在寫小程序的小項目，因爲是剛上手小程序，這途中遇到了許多問題，所幸在自己的堅持不懈下基本都得到了解決，今天就記錄一下怎麼設置緩存數據並且不覆蓋吧，如果有錯誤的地方麻煩大家指正，互相學習一下！
這是官方的關於緩存的說明，它會覆蓋掉之前的內容。我還是直接上源碼吧
這是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
/***獲取總頁面data裏面的數組 */
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文件的代碼
<!--pages/comment/writecomment/writecomment.wxml--> <view class='write-group'> <form bindsubmit='submit'> <!-- 文本輸入框 --> <view class='textarea-position'> <textarea name='writecomment' 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/comment/writecomment/writecomment.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;
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文件
<!--pages/comment/commentlist/commentlist.wxml-->
<view class='p-list-group'>
<view class='p-list-group-more'>
<!-- 輸出輸入頁面輸入的內容 -->
<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%;
}
好啦，我做的基本就這樣，代碼有點多，關鍵就是wx.setStorage()和wx.getStorage(),爲了方便我還是把兩個頁面完整代碼全部放這裏了
以上所述是小編給大家介紹的小程序設置緩存並且不覆蓋原有數據詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持！