關於本地緩存
1.wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以對本地緩存進行設置、獲取和清理。本地緩存最大為10MB
2.localStorage 是永久存儲
一、異步緩存
wx.setStorage(OBJECT)
將數據存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容
wx.setStorage({
key:"key",
data:"value"
})
wx.getStorage(OBJECT)
從本地緩存中異步獲取指定 key 對應的內容。
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
wx.getStorageInfo(OBJECT)
異步獲取當前storage的相關信息
wx.getStorageInfo({
success: function(res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
wx.removeStorage(OBJECT)
從本地緩存中異步移除指定 key 。
wx.removeStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
二、同步緩存
wx.setStorageSync(KEY,DATA)
將 data 存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個同步接口。
wx.getStorageSync(KEY)
從本地緩存中同步獲取指定 key 對應的內容。
wx.getStorageInfoSync
同步獲取當前storage的相關信息
wx.removeStorageSync(KEY)
從本地緩存中同步移除指定 key 。
三、清理緩存
wx.clearStorage()
清理本地數據緩存。
wx.clearStorageSync()
同步清理本地數據緩存
關於同步緩存和異步緩存的區別
以Sync（同步，同時）結尾的都是都是同步緩存，二者的區別是，異步不會阻塞當前任務，同步緩存直到同步方法處理完才能繼續往下執行。
但是一般情況下不要用清除所有的緩存，如果想要清除相應的緩存，設置對應的緩存內容為空數組就好
關於歷史搜索
<input type="text" class="search-icon" placeholder="請輸入要搜索的內容" bindinput="searchNameInput"/>
<text bindtap="setSearchStorage">搜索</text>
<view>
<view>
<text style="float:left;" bindtap="deleteHistory">歷史搜索</text>
<text style="float:right;" bindtap="deleteHistory">刪除搜索歷史</text>
</view>
<view>
<view class="search-list" wx:for="{{searchData}}" wx:key="item">
<view>{{item == null?'暫無數據':item}}</view>
</view>
</view>
</view>
頁面
這里有三個綁定事件
bindinput="searchNameInput" 獲取用戶輸入的數據
bindtap="setSearchStorage" 設置本地存儲
bindtap="deleteHistory" 刪除歷史搜索
//獲取用戶輸入框的值
searchNameInput:function(e){
var that = this;
that.setData({
inputValue:e.detail.value
})
}
e.detail.value就代表了當前輸入值
當點擊搜索的時候，bindtap="setSearchStorage"
//將用戶輸入的內容存入本地緩存,並且將搜索數據放到首頁
setSearchStorage:function(){
var that = this
if(this.data.inputValue != ''){
//調用API向本地緩存存入數據
var searchData = wx.getStorageSync('searchData') || []
searchData.push(this.data.inputValue)
wx.setStorageSync('searchData', searchData)
//讀取用戶搜索商品
var name = this.data.inputValue
wx.request({
url: 'www.shop.com/home/product/search',
data: {name:name},
method: 'GET',
success: function(res){
that.setData({
goodsList: res.data.info,
})
},
})
}
}
流程這么走：
1.用戶輸入數據，點擊搜索
2.如果數據不為空，加入（設置）本地緩存
3.去服務器搜索用戶想要的數據，賦值給這個頁面的變量
4.點擊刪除，去除本地這個key的value
這里的緩存形式的 key=>value
var searchData = wx.getStorageSync('searchData') || []
獲取本地名字為'searchData'的緩存，如果'searchData'這個緩存不存在就相當於重新什么一個空數組，賦值給searchData這個變量
searchData.push(this.data.inputValue)
將用戶輸入的值PUSH進searchData這個變量里
wx.setStorageSync('searchData', searchData)
調用API接口，重新設置key = 'searchData'的這個緩存的value等於searchData
下面的wx.request是請求數據的內容，說膩了，印象夠深了。
這里沒有綁定獲取緩存的bindtap，只要獲取到，然后添加到Page里面的data
//從本地獲取歷史搜索數據
var searchData = wx.getStorageSync('searchData')||[]
this.setData({
searchData:searchData
})
deleteHistory
//刪除歷史搜索數據
deleteHistory:function(){
var that = this
wx.showModal({
title: '提示',
content: '是否刪除歷史搜索',
success: function(res) {
if (res.confirm) {
wx.setStorageSync('searchData', []);
wx.switchTab({
url: '/pages/index/index',
})
}
}
})
}
這里是將'searchData'這個key的緩存的value為空數組，而不是使用API提供的wx.clearStorageSync，這個會清除其他的所有緩存，而我只是想清除這一個key的緩存