詳解小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)
最近在寫小程序的小項(xiàng)目,因?yàn)槭莿偵鲜中〕绦?,這途中遇到了許多問題,所幸在自己的堅(jiān)持不懈下基本都得到了解決,今天就記錄一下怎么設(shè)置緩存數(shù)據(jù)并且不覆蓋吧,如果有錯(cuò)誤的地方麻煩大家指正,互相學(xué)習(xí)一下!

這是官方的關(guān)于緩存的說明,它會(huì)覆蓋掉之前的內(nèi)容。我還是直接上源碼吧
這是writecomment.js文件
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
},
submit: function (event) {
var writecomment = event.detail.value.writecomment;
console.log(event);
var pages = getCurrentPages();
/***得到頁面有兩個(gè),一個(gè)是總頁面,一個(gè)是寫的頁面,我們需要的是總頁面 */
var page = pages[2];
var commentlist = page.data.commentlist;
//commentlist是另一個(gè)頁面設(shè)置的數(shù)組,這里是取得那個(gè)頁面定義的commentlist
/***獲取總頁面data里面的數(shù)組 */
if (event.detail.value.writecomment != '') {
commentlist.push(writecomment); /***把新的內(nèi)容放入數(shù)組中去,然后更新 */
page.setData({
commentlist: commentlist,
})
}
//這是緩存設(shè)置
wx.setStorage({
key: 'commentStorage',//key的值只是一個(gè)名稱,可以自己設(shè)置
data: commentlist,
//data指的是我們要放入緩存的數(shù)值,如果是固定的數(shù)據(jù)要用“”括起來,如果是變量就直接放變量的值
})
console.log(commentlist);//這是為了更好觀察我自己設(shè)置的輸出語句,可以不用管
wx.navigateBack({}) /***點(diǎn)擊完成后跳轉(zhuǎn)回到上一個(gè)頁面 */
},
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='請輸入內(nèi)容!' maxlength='-1' auto-height="true"> </textarea> </view> <!-- maxlength='-1'不限制輸入字符長度,auto-height="true"輸入框可以自動(dòng)變化大小 --> <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%;
}
接下來是另一個(gè)頁面,里面有獲取緩存的說明
// pages/comment/commentlist/commentlist.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
commentlist: [],//設(shè)置緩存的那個(gè)數(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',//這個(gè)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)聽用戶下拉動(dòng)作
*/
onPullDownRefresh: function () {
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
},
/**
* 用戶點(diǎn)擊右上角分享
*/
onShareAppMessage: function () {
}
})
commentlist.wxml文件
<!--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>
<!-- 寫計(jì)劃按鈕與搜索按鈕 -->
<view class='cardclass'>
<button class='btn-search' open-type='' bindtap='search' style="background-image:url(/images/plan/icon-search-1.png);"> 搜索</button>
<!-- 寫計(jì)劃 -->
<button class='btn-write' open-type='primary' bindtap='writecomment' style="background-image:url(/images/plan/icon-pen-1.png);">評(píng)論 </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;/***文本太長顯示省略號(hào)*/
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%;
}
好啦,我做的基本就這樣,代碼有點(diǎn)多,關(guān)鍵就是wx.setStorage()和wx.getStorage(),為了方便我還是把兩個(gè)頁面完整代碼全部放這里了
以上所述是小編給大家介紹的小程序設(shè)置緩存并且不覆蓋原有數(shù)據(jù)詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
微信小程序完美解決scroll-view高度自適應(yīng)問題的方法
這篇文章主要介紹了微信小程序完美解決scroll-view高度自適應(yīng)問題的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
js獲取URL的參數(shù)的方法(getQueryString)示例
getQueryString方法默認(rèn)返回的是 string如果是int類型,則JS使用的時(shí)候,要進(jìn)行轉(zhuǎn)換一下,下面有個(gè)不錯(cuò)的示例,大家可以參考下2013-09-09
微信小程序websocket實(shí)現(xiàn)聊天功能
這篇文章主要為大家詳細(xì)介紹了微信小程序websocket實(shí)現(xiàn)聊天功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
JavaScript語言中的Literal Syntax特性分析
JavaScript語言中的Literal Syntax特性分析...2007-03-03
javascript中parseInt()函數(shù)的定義和用法分析
這篇文章主要介紹了javascript中parseInt()函數(shù)的定義和用法,較為詳細(xì)的分析了parseInt()函數(shù)的定義及具體用法,以及參數(shù)使用時(shí)的注意事項(xiàng),需要的朋友可以參考下2014-12-12
微信JS-SDK自定義分享功能實(shí)例詳解【分享給朋友/分享到朋友圈】
這篇文章主要介紹了微信JS-SDK自定義分享功能,結(jié)合實(shí)例形式分析了基于JS-SDK接口實(shí)現(xiàn)的分享給朋友及分享到朋友圈等功能的相關(guān)配置文件與數(shù)據(jù)操作技巧,需要的朋友可以參考下2016-11-11
JS取request值以及自動(dòng)執(zhí)行使用示例
在網(wǎng)頁中JS函數(shù)自動(dòng)執(zhí)行常用三種方法,下面為大家詳細(xì)介紹下JS取request值以及自動(dòng)執(zhí)行使用,需要的朋友可以參考下2014-02-02

