本節(jié)學(xué)習(xí)目標(biāo)
- 使用組件storage緩存數(shù)據(jù)到本地磁盤
- 使用組件storage從本地磁盤讀取數(shù)據(jù)
- 如何刪除鍵值對(duì)
- 獲取本地存儲(chǔ)的鍵值對(duì)數(shù)量
- 獲取本地存儲(chǔ)的所有鍵名數(shù)組
場景描述
比如我們?cè)趹?yīng)用程序中輸入一段文字,這個(gè)時(shí)候關(guān)閉程序,當(dāng)再次打開后,我們想要看到上次輸入的內(nèi)容,這個(gè)需求就需要用到storage組件來實(shí)現(xiàn)數(shù)據(jù)的存儲(chǔ)和數(shù)據(jù)的讀取
內(nèi)容比較簡單 我們就開始吧
- 引入組件
const storage = weex.requireModule('storage')
-
** 一 數(shù)據(jù)的存儲(chǔ)**
API
setItem(key, value, callback)
參數(shù)
key {string}：要存儲(chǔ)的鍵慎冤，不允許是 "" 或 null
value {string}：要存儲(chǔ)的值幌墓，不允許是 "" 或 null
callback {function (e)}：執(zhí)行操作成功后的回調(diào)
e.result：表示設(shè)置是否成功，如果成功返回 "success"
e.data：undefined 表示設(shè)置成功，invalid_param 表示 key/value 為 "" 或者 null
注意
1.key 和 value 只支持字符串,如果要存儲(chǔ)對(duì)象,必須將其轉(zhuǎn)換為字符串
2.我們?nèi)绻啻尉彺嫱粋€(gè)key鍵的值,那么上次的值會(huì)被覆蓋掉
代碼如下
storage.setItem('cache',this.inputValue,res=>{
if(res.result=='success'){
// 數(shù)據(jù)緩存成功
}
})
- 二 讀取數(shù)據(jù)
API
getItem(key, callback)
參數(shù)
key {string}：要獲取的值的名稱住涉，不允許是 "" 或 null
callback {function (e)}：執(zhí)行操作成功后的回調(diào)
e.result：表示設(shè)置是否成功，如果成功返回 "success"
e.data：獲取對(duì)應(yīng)的鍵值字符串钠绍，如果沒有找到則返回 undefined
代碼
storage.getItem('cache',res=>{
if(res.result=='success'){
this.inputValue=res.data
}
})
-
三 清除緩存數(shù)據(jù)
根據(jù)鍵值清除緩存數(shù)據(jù)
API
removeItem(key, callback)
參數(shù)
key {string}：要?jiǎng)h除的值的名稱舆声，不允許是 "" 或 null
callback {function (e)}：執(zhí)行操作成功后的回調(diào).
e.result：表示刪除是否成功，如果成功返回 "success"
e.data：undefined 表示刪除成功
代碼如下
storage.removeItem('cache',res=>{
if(res.result=='success'){
modal.toast({message:'清除完成',duration:1})
}
})
- 四 獲取存儲(chǔ)的鍵值對(duì)數(shù)量
API
length(callback)
參數(shù)
callback {function (e)}：執(zhí)行操作成功后的回調(diào)
e.result：表示設(shè)置是否成功柳爽，如果成功返回 "success"
e.data：當(dāng)前已存儲(chǔ)項(xiàng)的數(shù)量
代碼
storage.length(res=>{
if(res.result='success'){
this.length = res.data
}
})
- 五.獲取存儲(chǔ)的所有鍵名數(shù)組
API:
getAllKeys(callback)
參數(shù)
callback {function (e)}：執(zhí)行操作成功后的回調(diào)媳握。
e.result：表示設(shè)置是否成功，如果成功返回 "success"
e.data：所有鍵名組成的數(shù)組
代碼
storage.getAllKeys(res=>{
if(res.result=='success'){
this.inputValue = res.data.toString()
}
})
開發(fā)過程中的注意點(diǎn)
1.storage 模塊有一個(gè)限制就是瀏覽器端（H5）只能存儲(chǔ)小于5M的數(shù)據(jù)磷脯，因?yàn)樵?H5/Web 端的實(shí)現(xiàn)是采用 HTML5 LocalStorage API,iOS 和 android 端沒有任何限制
2.這個(gè)模塊存儲(chǔ)的數(shù)據(jù)在同一個(gè)應(yīng)用的任意一個(gè)vue頁面都可以進(jìn)行訪問,它們共享本地?cái)?shù)據(jù)
