摘要：并且數(shù)據(jù)同步后默認(rèn)會(huì)保存下來(lái)，這樣下次再請(qǐng)求時(shí)存儲(chǔ)層中就有數(shù)據(jù)了。以下參數(shù)會(huì)傳到中這么一來(lái)，存儲(chǔ)層就和接口層對(duì)接起來(lái)了。五支持永久保存在某些場(chǎng)景下，可能不方便寫(xiě)過(guò)期時(shí)間，這時(shí)默認(rèn)可以傳遞，標(biāo)記該數(shù)據(jù)永不過(guò)期。

開(kāi)門見(jiàn)山地說(shuō)，這篇文章【又】是一篇安利軟文~，安利的對(duì)象就是 tua-storage。

顧名思義，這就是一款存儲(chǔ)數(shù)據(jù)的工具。

用 tua-storage 好處大大的有么？

那必須滴~，下面開(kāi)始我的表演~

多端統(tǒng)一 api

支持?jǐn)?shù)據(jù)同步

數(shù)據(jù)過(guò)期邏輯

自動(dòng)清理過(guò)期數(shù)據(jù)

支持永久保存

支持批量操作

日常開(kāi)發(fā)中，在不同的平臺(tái)下由于有不同的存儲(chǔ)層接口，所以往往導(dǎo)致相同邏輯的同一份代碼要寫(xiě)幾份兒。

例如，小程序中保存數(shù)據(jù)要使用【異步】的 wx.setStorage、wx.getStorage 或?qū)?yīng)的同步方法；

而在 web 端使用 localStorage 的話，則是【同步】的 setItem、getItem 等方法；

在 React-Native 的場(chǎng)景下，使用的又是 AsyncStorage 中【異步】的 setItem、getItem...

然而，經(jīng)過(guò) tua-storage 的二次封裝，以上兩個(gè)方法統(tǒng)一變成了：

save: 異步保存

load: 異步讀取

此外還有一些其他方法：

clear: 異步清除（刪除多個(gè)）

remove: 異步刪除（刪除單個(gè)）

getInfo: 異步獲取信息（如 keys）

詳情參閱這里的文檔

在某些場(chǎng)景下正好需要調(diào)用同步方法的話，咋辦咧？

與 Node.js 的 api 風(fēng)格差不多，在上述異步方法后面加上 Sync 就是對(duì)應(yīng)的同步方法：

saveSync

loadSync

clearSync

removeSync

getInfoSync

那么在 AsyncStorage 的場(chǎng)景下，壓根就沒(méi)有同步方法時(shí)調(diào)用以上方法會(huì)怎么樣呢？

嗯，你猜得沒(méi)錯(cuò)，會(huì)直接報(bào)錯(cuò)...

如何區(qū)分不同的場(chǎng)景呢？

在初始化的時(shí)候傳遞 storageEngine 即可：

import TuaStorage from "tua-storage"

const tuaStorage = new TuaStorage({
    // 小程序
    storageEngine: wx,

    // web
    storageEngine: localStorage,

    // React-Native
    storageEngine: AsyncStorage,

    // Node.js
    storageEngine: {},
})

注意：傳遞的是【對(duì)象】，而非字符串！

對(duì)于一個(gè)二次封裝多端存儲(chǔ)層的庫(kù)來(lái)說(shuō)，保證多端 api 的統(tǒng)一僅僅是常規(guī)操作而已。

tua-storage 的另一大亮點(diǎn)就是數(shù)據(jù)同步功能。

想想平時(shí)我們是怎么使用存儲(chǔ)層的

讀取一個(gè)數(shù)據(jù)

正好存儲(chǔ)層里有這個(gè)數(shù)據(jù)

返回?cái)?shù)據(jù)（皆大歡喜，happy ending~）

假如存儲(chǔ)層里沒(méi)這個(gè)數(shù)據(jù)

手動(dòng)調(diào)用各種方法去同步這個(gè)數(shù)據(jù)

手動(dòng)存到存儲(chǔ)層中，以便下次讀取

各位有沒(méi)有看出其中麻煩的地方在哪兒？
數(shù)據(jù)同步部分的復(fù)雜度全留給了業(yè)務(wù)側(cè)。

讓我們回歸這件事的【初心】：我僅僅需要獲取這個(gè)數(shù)據(jù)！我不管它是來(lái)自存儲(chǔ)層、來(lái)自接口數(shù)據(jù)、還是來(lái)自其他什么地方...

因此 tua-storage 在讀取數(shù)據(jù)時(shí)很貼心地提供了一個(gè) syncFn 參數(shù)，作為數(shù)據(jù)同步的函數(shù)，當(dāng)請(qǐng)求的數(shù)據(jù)不存在或已過(guò)期時(shí)自動(dòng)調(diào)用該函數(shù)。并且數(shù)據(jù)同步后默認(rèn)會(huì)保存下來(lái)，這樣下次再請(qǐng)求時(shí)存儲(chǔ)層中就有數(shù)據(jù)了。

syncParams 的使用場(chǎng)景是接口需要傳參時(shí)，這些參數(shù)會(huì)傳給 syncFn。

tuaStorage.load({
    key: "some data",
    syncFn: ({ a }) => axios("some api url" + a),
    // 以下參數(shù)會(huì)傳到 syncFn 中
    syncParams: { a: "a" },
})

這么一來(lái)，存儲(chǔ)層就和接口層對(duì)接起來(lái)了。業(yè)務(wù)側(cè)再也不用手動(dòng)調(diào)用 api 獲取數(shù)據(jù)。

每次讀取數(shù)據(jù)時(shí)如果都要手動(dòng)傳同步函數(shù)，實(shí)際編碼時(shí)還是很麻煩...

不急，吃口藥~

tua-storage 在初始化時(shí)能夠傳遞一個(gè)叫做 syncFnMap 參數(shù)。顧名思義，這是一個(gè)將 key 和 syncFn 映射起來(lái)的對(duì)象。

const tuaStorage = new TuaStorage({
    // ...
    syncFnMap: {
        "data one": () => axios("data one api"),
        "data two": () => axios("data two api"),
        // ...
    },
})

// 不用手動(dòng)傳 syncFn，默認(rèn)匹配 syncFnMap 中的對(duì)應(yīng)函數(shù)
tuaStorage.load({ key: "data one" })

其實(shí)手動(dòng)編寫(xiě)每個(gè) api 請(qǐng)求函數(shù)也是很繁瑣的，要是有個(gè)根據(jù)配置自動(dòng)生成請(qǐng)求函數(shù)的庫(kù)就好了~

誒~，巧了么不是~。各位開(kāi)發(fā)者老爺們了解一下同樣跨平臺(tái)的 tua-api ~？

tua-storage 搭配 tua-api 之后會(huì)變成這樣

import TuaStorage from "tua-storage"
import { getSyncFnMapByApis } from "tua-api"

// 本地寫(xiě)好的各種接口配置
import * as apis from "@/apis"

const tuaStorage = new TuaStorage({
    syncFnMap: getSyncFnMapByApis(apis),
})

一般各個(gè)平臺(tái)的存儲(chǔ)層都沒(méi)有數(shù)據(jù)過(guò)期這一邏輯。但在使用 tua-storage 時(shí)默認(rèn)每個(gè)數(shù)據(jù)都有過(guò)期時(shí)間這一屬性。

默認(rèn)為 30 秒，可以在初始化時(shí)配置默認(rèn)超時(shí)時(shí)間。

import TuaStorage from "tua-storage"

const tuaStorage = new TuaStorage({
    // 改為 60 秒
    defaultExpires: 60,
})

// 返回一個(gè) Promise
tuaStorage
    .save({
        key: "data key",
        data: { foo: "bar" },

        // 這里傳遞的過(guò)期時(shí)間優(yōu)先級(jí)更高
        expires: 90,
    })
    .then(console.log)
    .catch(console.error)


// 保存到 storage 中的數(shù)據(jù)大概長(zhǎng)這樣
// key 之前會(huì)加上初始化傳入的默認(rèn)前綴
{
    "TUA_STORAGE_PREFIX: data key": {
        expires: 90,
        rawData: { foo: "bar" },
    },
}

為了保證存在 storage 中的數(shù)據(jù)名稱不沖突，以及實(shí)現(xiàn)版本控制，tua-storage 默認(rèn)有一個(gè)存儲(chǔ)前綴：storageKeyPrefix。

默認(rèn)值為 TUA_STORAGE_PREFIX: ，所以在上一小節(jié)中保存的數(shù)據(jù)會(huì)有一個(gè)奇怪的前綴。

保證名稱不沖突很好理解，如何實(shí)現(xiàn)版本控制呢？

clear 函數(shù)能夠接受一個(gè)白名單數(shù)組（因?yàn)閮?nèi)部是通過(guò) indexOf 來(lái)判斷的，所以不必填寫(xiě)完整的 key 值）。

import TuaStorage from "tua-storage"

const tuaStorage = new TuaStorage({ ... })

tuaStorage.clear(["key"])
    .then(console.log)
    .catch(console.error)

// 假設(shè)現(xiàn)在 storage 中有以下數(shù)據(jù)
{
    "foo": {},
    "bar": {},
    "foo-key": {},
    "bar-key": {},
}

// 清除后剩下的數(shù)據(jù)是
{
    "foo-key": {},
    "bar-key": {},
}

所以在調(diào)用 clear 時(shí)，在白名單中傳入新的存儲(chǔ)前綴，即可實(shí)現(xiàn)刪除上一版本數(shù)據(jù)的功能。

import TuaStorage from "tua-storage"

// 上一版本的前綴
const prefix1 = "STORAGE_PREFIX_V1.0: "

// 這一版本的前綴
const prefix2 = "STORAGE_PREFIX_V1.1: "

const tuaStorage = new TuaStorage({
    // 將默認(rèn)前綴切換成新版本的
    storageKeyPrefix: prefix2,
})

// 開(kāi)始清除上個(gè)版本的數(shù)據(jù)
tuaStorage.clear([ prefix2 ])
    .then(console.log)
    .catch(console.error)

更多默認(rèn)配置參閱這里的文檔

默認(rèn)在啟動(dòng)時(shí)會(huì)進(jìn)行一次過(guò)期數(shù)據(jù)清理（可以關(guān)閉），之后每過(guò)一段時(shí)間會(huì)再次清理。

什么樣的數(shù)據(jù)會(huì)被清理呢？

首先當(dāng)然是清理已到過(guò)期時(shí)間的數(shù)據(jù)，即有一個(gè)屬性為 expires 的數(shù)據(jù)，且當(dāng)前時(shí)間已超過(guò)了該時(shí)間。

一旦遇到不滿足格式的數(shù)據(jù)（非對(duì)象、沒(méi)有 expires 屬性）則跳過(guò)，這樣就不會(huì)誤清除其他程序保存的數(shù)據(jù)。

在初始化時(shí)可傳入 autoClearTime 修改默認(rèn)自動(dòng)清理時(shí)間間隔。

默認(rèn)為一分鐘，注意是以秒為單位。

在某些場(chǎng)景下，可能不方便寫(xiě)過(guò)期時(shí)間，這時(shí)默認(rèn)可以傳遞 expires: null，標(biāo)記該數(shù)據(jù)永不過(guò)期。

不喜歡用 null 標(biāo)記？

大丈夫~，初始化時(shí)傳遞 neverExpireMark 即可修改為你喜歡的別的標(biāo)記。

import TuaStorage from "tua-storage"

const tuaStorage = new TuaStorage({
    neverExpireMark: "never",
})

// 永不過(guò)期
tuaStorage.save({
    key: "some key",
    data: "some data",
    expires: "never",
})

假設(shè)現(xiàn)在有一組數(shù)據(jù)需要保存或讀取，常規(guī)操作就是使用 Promise.all 發(fā)起多個(gè)操作。

import TuaStorage from "tua-storage"

const tuaStorage = new TuaStorage({ ... })

const dataToBeSaved = [
    { key: "key one", data: "some data" },
    { key: "key two", data: "some data" },
]

// 異步
const result = dataToBeSaved
    .map(tuaStorage.save.bind(tuaStorage))
    .then(Promise.all.bind(Promise))

// 同步
const result = dataToBeSaved
    .map(tuaStorage.saveSync.bind(tuaStorage))

講道理這樣寫(xiě)還是挺煩的...所以 tua-storage 的各個(gè) api 還支持直接傳入數(shù)組：

// 異步
tuaStorage.save(dataToBeSaved)
    .then(console.log)
    .catch(console.log)

// 同步
tuaStorage.saveSync(dataToBeSaved)

還在為 web 端、小程序端、React-Native 端、node 端業(yè)務(wù)側(cè)代碼使用不一樣的方式調(diào)用存儲(chǔ)層煩惱么？還在為手動(dòng)數(shù)據(jù)同步，保存數(shù)據(jù)，處理過(guò)期邏輯而煩躁么？各位開(kāi)發(fā)者老爺們不妨試一試 tua-storage，（擠需體驗(yàn)三番鐘，里造會(huì)干我一樣，愛(ài)象介款工具）。

inspired by react-native-storage