uni-app緩存的使用

 

uni.setStorage(OBJECT)

將數據存儲在本地緩存中指定的 key 中,會覆蓋掉原來該 key 對應的內容,這是一個異步接口。javascript

OBJECT 參數說明html

參數名 類型 必填 說明
key String 本地緩存中的指定的 key
data Any 須要存儲的內容,只支持原生類型、及可以經過 JSON.stringify 序列化的對象
success Function 接口調用成功的回調函數
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功、失敗都會執行)

示例html5

uni.setStorage({
    key: 'storage_key',// 存放內容的key, 注: key相同會進行覆蓋
    data: 'hello',     // 存放的內容
    success: function () { //存放成功的回調函數
        console.log('success');
    }
});

uni.setStorageSync(KEY,DATA)

將 data 存儲在本地緩存中指定的 key 中,會覆蓋掉原來該 key 對應的內容,這是一個同步接口。java

參數說明web

參數 類型 必填 說明
key String 本地緩存中的指定的 key
data Any 須要存儲的內容,只支持原生類型、及可以經過 JSON.stringify 序列化的對象
try {
    //將數據存放在以存在的key上,進行覆蓋
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

uni.getStorage(OBJECT)

從本地緩存中異步獲取指定 key 對應的內容。sql

OBJECT 參數說明小程序

參數名 類型 必填 說明
key String 本地緩存中的指定的 key
success Function 接口調用的回調函數,res = {data: key對應的內容}
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功、失敗都會執行)

success 返回參數說明微信小程序

參數 類型 說明
data Any key 對應的內容

示例api

uni.getStorage({
    key: 'storage_key', //須要獲取的key
    success: function (res) {//獲取成功的回調
        console.log(res.data);
    }
});

uni.getStorageSync(KEY)

從本地緩存中同步獲取指定 key 對應的內容。瀏覽器

參數說明

參數 類型 必填 說明
key String 本地緩存中的指定的 key

示例

try {
    //須要獲取的key,直接返回內容
    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({//獲取全部storage中的全部信息
    success: function (res) {//獲取成功的回調
        console.log(res.keys);//當前storage中全部的key
        console.log(res.currentSize);//當前佔用的空間大小,單位:kb
        console.log(res.limitSize);//限制的空間大小,單位:kb
    }
});

uni.getStorageInfoSync()

同步獲取當前 storage 的相關信息。

平臺差別說明

App H5 微信小程序 支付寶小程序 百度小程序
HBuilderX 2.0.3+

示例

try {
    //獲取當前全部storage信息
    const res = uni.getStorageInfoSync();
    console.log(res.keys);//全部的key
    console.log(res.currentSize);//當前佔用空間的大小,單位:kb
    console.log(res.limitSize);//限制空間的大小,單位:kb
} catch (e) {
    // error
}

uni.removeStorage(OBJECT)

從本地緩存中異步移除指定 key。

OBJECT 參數說明

參數名 類型 必填 說明
key String 本地緩存中的指定的 key
success Function 接口調用的回調函數
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功、失敗都會執行)

示例

uni.removeStorage({ //從本地刪除指定key
    key: 'storage_key',//key
    success: function (res) {//刪除成功的回調
        console.log('success');
    }
});

uni.removeStorageSync(KEY)

從本地緩存中同步移除指定 key。

參數說明

參數名 類型 必填 說明
key String 本地緩存中的指定的 key

示例

try {
    // 從本地刪除指定的key
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}

uni.clearStorage()

清理本地數據緩存。

示例

uni.clearStorage();//全部的本地緩存將被清除,異步

uni.clearStorageSync()

同步清理本地數據緩存。

示例

try {
    //清理全部的本地緩存
    uni.clearStorageSync();
} catch (e) {
    // error
}

注意

uni-app的Storage在不一樣端的實現不一樣:

  • H5端爲localStorage,瀏覽器限制5M大小,是緩存概念,可能會被清理
  • App端爲原生的plus.storage,無大小限制,不是緩存,是持久化的
  • 各個小程序端爲其自帶的storage api,數據存儲生命週期跟小程序自己一致,即除用戶主動刪除或超過必定時間被自動清理,不然數據都一直可用。
  • 微信小程序單個 key 容許存儲的最大數據長度爲 1MB,全部數據存儲上限爲 10MB。
  • 支付寶小程序單條數據轉換成字符串後,字符串長度最大200*1024。同一個支付寶用戶,同一個小程序緩存總上限爲10MB。
  • 百度、頭條小程序文檔未說明大小限制

除此以外,其餘數據存儲方案:

  • H5端還支持websql、indexedDB、sessionStorage
  • App端還支持SQLiteIO文件等本地存儲方案。

官方網址

相關文章
相關標籤/搜索