> 在APP開發過程中，緩存操作經常會用到，這里的操作函數分同步和異步兩種方式，可根據實際情況選擇
[TOC]
## uni.setStorage(OBJECT)
> 將數據存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個異步接口。
**OBJECT 參數說明**
| 參數名 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| key | String | 是 | 本地緩存中的指定的 key |
| data | Any | 是 | 需要存儲的內容，只支持原生類型、及能夠通過 JSON.stringify 序列化的對象 |
| success | Function | 否 | 接口調用成功的回調函數 |
| fail | Function | 否 | 接口調用失敗的回調函數 |
| complete | Function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行） |
**示例**
~~~
uni.setStorage({
key: 'storage_key',
data: 'hello',
success: function () {
console.log('success');
}
});
~~~
## uni.setStorageSync(KEY,DATA)
> 將 data 存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應的內容，這是一個同步接口。
**參數說明**
| 參數 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| key | String | 是 | 本地緩存中的指定的 key |
| data | Any | 是 | 需要存儲的內容，只支持原生類型、及能夠通過 JSON.stringify 序列化的對象 |
~~~
try {
uni.setStorageSync('storage_key', 'hello');
} catch (e) {
// error
}
~~~
## uni.getStorage(OBJECT)
> 從本地緩存中異步獲取指定 key 對應的內容。
**OBJECT 參數說明**
| 參數名 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| key | String | 是 | 本地緩存中的指定的 key |
| success | Function | 是 | 接口調用的回調函數，res = {data: key對應的內容} |
| fail | Function | 否 | 接口調用失敗的回調函數 |
| complete | Function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行） |
**success 返回參數說明**
| 參數 | 類型 | 說明 |
| --- | --- | --- |
| data | Any | key 對應的內容 |
**示例**
~~~
uni.getStorage({
key: 'storage_key',
success: function (res) {
console.log(res.data);
}
});
~~~
## uni.getStorageSync(KEY)
> 從本地緩存中同步獲取指定 key 對應的內容。
**參數說明**
| 參數 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| key | String | 是 | 本地緩存中的指定的 key |
**示例**
~~~
try {
const value = uni.getStorageSync('storage_key');
if (value) {
console.log(value);
}
} catch (e) {
// error
}
~~~
## uni.getStorageInfo(OBJECT)
> 異步獲取當前 storage 的相關信息。
**平臺差異說明**
| App | H5 | 微信小程序 | 支付寶小程序 | 百度小程序 |
| --- | --- | --- | --- | --- |
| HBuilderX 2.0.3+ | √ | √ | √ | √ |
**OBJECT 參數說明**
| 參數名 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| success | Function | 是 | 接口調用的回調函數，詳見返回參數說明 |
| fail | Function | 否 | 接口調用失敗的回調函數 |
| complete | Function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行） |
**success 返回參數說明**
| 參數 | 類型 | 說明 |
| --- | --- | --- |
| keys | Array＜String＞ | 當前 storage 中所有的 key |
| currentSize | Number | 當前占用的空間大小, 單位：kb |
| limitSize | Number | 限制的空間大小, 單位：kb |
**示例**
~~~
uni.getStorageInfo({
success: function (res) {
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
}
});
~~~
## uni.getStorageInfoSync()
> 同步獲取當前 storage 的相關信息。
**平臺差異說明**
| App | H5 | 微信小程序 | 支付寶小程序 | 百度小程序 |
| --- | --- | --- | --- | --- |
| HBuilderX 2.0.3+ | √ | √ | √ | √ |
**示例**
~~~
try {
const res = uni.getStorageInfoSync();
console.log(res.keys);
console.log(res.currentSize);
console.log(res.limitSize);
} catch (e) {
// error
}
~~~
## uni.removeStorage(OBJECT)
> 從本地緩存中異步移除指定 key。
**OBJECT 參數說明**
| 參數名 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| key | String | 是 | 本地緩存中的指定的 key |
| success | Function | 是 | 接口調用的回調函數 |
| fail | Function | 否 | 接口調用失敗的回調函數 |
| complete | Function | 否 | 接口調用結束的回調函數（調用成功、失敗都會執行） |
**示例**
~~~
uni.removeStorage({
key: 'storage_key',
success: function (res) {
console.log('success');
}
});
~~~
## uni.removeStorageSync(KEY)
> 從本地緩存中同步移除指定 key。
**參數說明**
| 參數名 | 類型 | 必填 | 說明 |
| --- | --- | --- | --- |
| key | String | 是 | 本地緩存中的指定的 key |
**示例**
~~~
try {
uni.removeStorageSync('storage_key');
} catch (e) {
// error
}
~~~
## uni.clearStorage()
> 清理本地數據緩存。
**示例**
~~~
uni.clearStorage();
~~~
## uni.clearStorageSync()
> 同步清理本地數據緩存。
**示例**
~~~
try {
uni.clearStorageSync();
} catch (e) {
// error
}
~~~
## 緩存操作在各端的具體實現區別
> * H5端為localStorage，瀏覽器限制5M大小，是緩存概念，可能會被清理
> * App端為原生的plus.storage，無大小限制，不是緩存，是持久化的
> * 各個小程序端為其自帶的storage api，數據存儲生命周期跟小程序本身一致，即除用戶主動刪除或超過一定時間被自動清理，否則數據都一直可用。
> * 微信小程序單個 key 允許存儲的最大數據長度為 1MB，所有數據存儲上限為 10MB。
> * 支付寶小程序單條數據轉換成字符串后，字符串長度最大200\*1024。同一個支付寶用戶，同一個小程序緩存總上限為10MB。
> * 百度、字節跳動小程序文檔未說明大小限制
除此之外，其他數據存儲方案：
> * H5端還支持websql、indexedDB、sessionStorage
> * App端還支持[SQLite](https://www.html5plus.org/doc/zh_cn/sqlite.html)、[IO文件](https://www.html5plus.org/doc/zh_cn/io.html)等本地存儲方案。
從HBuilderX2.6.6+起，App-Android平臺對本地storage數據存儲進行了性能優化，它的具體優化方式和升級注意事項，詳見：https://ask.dcloud.net.cn/article/37071
- 基礎知識
- UNI核心介紹
- flex布局
- 生命周期
- 全局方法
- 組件定義
- 自定義組件
- 全局組件
- 組件之間的數據傳輸
- 條件編譯
- 自定義頭部
- 節點信息 (SelectorQuery)
- vuejs基礎語法
- 頁面跳轉以及參數傳遞
- 事件的監聽注冊以及觸發
- css3動畫
- block的妙用
- mixin (混入)
- uniapp快捷鍵
- vuex狀態管理
- 實用功能
- 獲取服務提供商
- 啟動頁 / 啟動界面
- 引導頁
- tabbar配置
- 頭部導航欄基礎設置
- 上拉下拉（刷新/加載）
- 第三方登錄
- 第三方分享
- 推送通知 之 unipush
- scroll-view雙聯動
- 配置iOS通用鏈接（Universal Links）
- 本地緩存操作
- 升級/更新方案
- 熱更新
- 圖片上傳
- 搜索頁實現
- canvas繪圖助手
- 地圖定位
- 第三方支付————todo
- 分類輪播
- 清除應用緩存
- uniapp與webview的實時通訊
- 視頻-----todo
- 聊天----todo
- 長列表swiper左右切換
- 第三方插件
- uview
- mescroll
- uCharts (圖表)
- 無名 (更新插件)
- 第三方模版
- 自定義基座
- 打包發行
- 要封裝的方法
- 緩存 cache.js
- 請求接口 request.js
- 工具類 util.js
- 小程序登錄 xcxLogin.js
- 版本更新 update.js
- 優質插件
- 更新插件----todo
- 語音
- 語音識別 (含上傳)
- 百度語音合成播報接口
- 官方常用組建
- input 輸入框
- image 圖片
- audio 音頻
- picker 選擇器
- video 視頻
- scroll-view 滾動視圖