小白記錄，大神勿噴
今天在寫微信小程序時遇到了一個功能。要求記錄客戶的搜索歷史，以及對搜索歷史的單條刪除。剛開始我以為后臺提供了記錄用戶搜索歷史的接口，當我翻遍了接口文檔也沒找到相關的接口我才知道這個功能需要前端來完成。
剛開始我的想法很簡單，創建一個數組，然后用戶每次搜索完就把記錄保存在數組中就可以了，很顯然我的想法太幼稚了，因為每次加載頁面時數組也會跟著初始化成空數組，根本不可能實現永久保存記錄。這個想法被pass后我就想可不可以保存在全局變量中？用戶在使用中可以正常，但是退出小程序再打開數組一樣會被初始化，很顯然這個想法也不可以。現在問題點就在于如何能夠永久的保存用戶輸入的數據而不被初始化呢？這時就需要用到小程序給我們提供的一個接口把數據寫在緩存中，這樣只要用戶不清楚手機緩存，那么這個記錄就會一直存在。下面是具體的思路。
1.獲取緩存
小程序給我們提供了兩種方式獲取緩存，一個是wx.getStorage(OBJECT)和wx.getStorageSync(KEY)。兩者的區別是一個是同步獲取，一個是異步獲取這里不做過多的解釋。
在頁面初始的時候我們就要獲取一次歷史記錄（緩存）。
onLoad：function(){
var that = this;
that.getLishi();
}
getLishi:function(){
var that = this;
wx.getStorage({
key: "lishi",
success: function (res) {
that.setData({
sercherStorage: res.data
})
}
})
},
上述代碼意思就是獲取緩存名字lishi的緩存數據，然后獲取成功賦值給data里面的sercherStorage用來渲染頁面。
2. 寫入緩存
同樣，小程序也給我們提供了兩個方法來寫入緩存一個是wx.setStorage(OBJECT)另一個是wx.setStorageSync(KEY,DATA)，區別也在于一個同步一個異步。這里有一點要值得注意的是key相同會覆蓋掉原來該 key 對應的內容。所以我們不能直接用。我的思路就是，先創建一個數組保存sercherStorage的值（上一步獲取用戶的記錄）然后每次保存的時候都往這個數組里面增加內容。然后在把這個數組寫入到緩存，這樣每次寫入的數據都是之前的數據加上新數據一起寫入了。最終在執行一次getLish（）來渲染頁面
search:function(e){
// console.log(e)
var that = this;
if (e.detail.value != ""){
var array = that.data.sercherStorage;
array.push(e.detail.value)
wx.setStorageSync('lishi',array);
that.getLishi();
}
},
3刪除緩存
刪除緩存小程序也給出了刪除方法，有興趣的可以學習一下，這里就不介紹了，因為我們需要刪除單條記錄，如果清楚緩存的話那么所有的記錄都會刪除。所以我們還是靠數組來解決這個問題。
先創建一個數組保存sercherStorage的值，然后根據用戶點擊的下標來刪除數組中的數據，最后在把刪除完成的寫入到緩存，最終渲染頁面。
remove:function(e){
var that = this;
console.log(e)
var array = that.data.sercherStorage;
array.splice(e.target.dataset.item,1);
wx.setStorageSync('lishi', array);
that.getLishi();
}
})
下面是樣式布局，僅供參考，大神勿噴
search.wxml
<block wx:for="{{sercherStorage}}">
<view class='hot-zuijin'>
<image src='../../images/search.png'></image>
<text>{{item}}</text>
<image src='../../images/trash.png' data-item="{{index}}" bindtap='remove'></image>
</view>
</block>
<view class='hot-clear'>
<label>清除歷史紀錄</label>
</view>
</view>
search.wxss
label{
padding:0 24rpx;
display: block;
font-size: 28rpx;
color: #999;
border-bottom: 2rpx solid #D4D4D4;
padding-bottom: 12rpx;
}
.hot-zuijin{
display: flex;
justify-content: space-between;
align-items: center;
padding: 24rpx;
border-bottom: 2rpx solid #D4D4D4;
}
.hot-zuijin image{
width: 26.6rpx;
height: 26.6rpx;
}
.hot-zuijin text{
display: block;
flex: 1;
overflow: hidden;
margin: 0 20rpx;
}
.hot-clear{
margin-top: 24rpx;
text-align: center
}
