工具
HBuilderX微信開發者工具技術
vueuni-appJavaScriptCSS3在使用uni-app進行微信小程序開發過程中，如果不同界面中需要登錄用戶的信息，這時就需要用到數據緩存。那麼，數據緩存有哪些方法呢？如何設置緩存、獲取緩存、刪除緩存和清空緩存？下面利用具體的實例來說明：
1、在uni-app項目中，新建cookie頁面，並在頁面插入設置緩存按鈕，綁定點擊事件setCookie
頁面插入設置緩存按鈕，綁定點擊事件2、在script標籤的methods中，定義點擊事件setCookie，調用設置緩存API
setCookie() {
uni.setStorage({
key: 'user',
data: 'admin',
success: (res) => {
console.log(res)
},
fail: (err) => {
console.log(err)
}
})
}
調用設置緩存的API3、保存代碼並運行到小程序模擬器，查看界面效果
運行到小程序模擬器，查看界面效果
4、點擊設置緩存按鈕，查看控制臺列印結果
點擊設置緩存按鈕，查看控制臺列印結果5、使用相同方法，添加一個獲取緩存按鈕
添加一個獲取緩存按鈕6、接著，在methods中，定義獲取緩存的點擊事件，調用API
getCookie() {
uni.getStorage({
key: 'user',
success: (res) => {
console.log(res)
}
})
}
定義獲取緩存的點擊事件7、再次保存代碼並刷新，可以查看到獲取緩存按鈕
查看到獲取緩存按鈕
8、點擊獲取緩存按鈕，查看控制臺列印結果，包含緩存數據data
查看控制臺列印結果，包含緩存數據data9、返回到HBuilderX工具，添加刪除緩存按鈕，並綁定delCookie事件
添加刪除緩存按鈕，並綁定delCookie事10、接著，定義刪除緩存事件，調用uni.removeStorage()
delCookie() {
uni.removeStorage({
key: 'user',
success: (res) => {
console.log(res)
}
})
}
定義刪除緩存事件11、再次保存代碼並編譯，可以查看到刪除緩存按鈕
查看到刪除緩存按鈕12、先點擊獲取緩存按鈕，然後點擊刪除緩存，查看控制臺列印結果，接著再次點擊獲取緩存按鈕
先點擊獲取緩存按鈕，然後點擊刪除緩存13、刪除緩存是清除某一指定key的緩存數據，如果想要清空本地所有緩存數據，可以使用清除API；插入一個清空緩存按鈕
插入一個清空緩存按鈕14、定義清空緩存點擊事件，調用uni.clearStorage()
clearCookie() {
uni.clearStorage()
}
調用uni.clearStorage()15、保存代碼並刷新，模擬器界面上出現清空緩存按鈕
模擬器界面上出現清空緩存按鈕16、點擊設置緩存按鈕，然後點擊獲取緩存按鈕，接著點擊清空緩存按鈕，最後再點擊獲取緩存按鈕，查看控制臺列印結果
依次操作不同按鈕，查看控制臺列印結果