百度智能小程序 存儲本地緩存中指定的key

swan.setStorage

解釋：將數(shù)據(jù)存儲在本地緩存中指定的 key 中，會覆蓋掉原來該 key 對應(yīng)的內(nèi)容。主動(dòng)刪除歷史小程序，卸載 百度 APP，或在系統(tǒng)中清除百度 app 的緩存即可清除數(shù)據(jù)。目前單個(gè) key 允許存儲的最大數(shù)據(jù)長度無限制，沒有自動(dòng)清理存儲機(jī)制。storage 上限 10MB，用戶需主動(dòng)清理，期間數(shù)據(jù)一直可用。

Web 態(tài)說明：受瀏覽器限制，Web 態(tài) storage 的容量一般為 5MB，具體視瀏覽器 localStorage 的容量大小而定。

方法參數(shù)

Object object

object參數(shù)說明

示例 

在開發(fā)者工具中打開

圖片示例

代碼示例 1

<view class="wrap">
    <view class="card-area">
        <view class="list-area border-bottom">
            <label class="list-item-key-4">key</label>
            <input class="list-item-value" bindfocus="keyFocus" bindinput="keyInput" type="text" value="{{key}}" placeholder="請輸入key" />
        </view>
        <view class="list-area border-bottom">
            <label class="list-item-key-4">value</label>
            <input class="list-item-value" bindfocus="valueFocus" bindinput="valueInput" type="text" value="{{value}}" placeholder="請輸入value" />
        </view>
        <view>
            <button bindtap="setStorage" type="primary" hover-stop-propagation="true">存儲數(shù)據(jù)</button>
            <button bindtap="getStorage" type="primary" hover-stop-propagation="true" disabled="{{disabled}}">讀取數(shù)據(jù)</button>
        </view>
    </view>
</view>

Page({
    data: {
        key: '示例Key',
        value: '示例Value',
        disabled: true
    },
    keyInput(e) {
        this.setData('key', e.detail.value);
    },
    valueInput(e) {
        this.setData('value', e.detail.value);
    },
    valueFocus() {
        this.setData('value', '');
    },
    keyFocus() {
        this.setData('key', '');
    },
    setStorage() {
        let key = this.hasKey();
        if (!key) {
            return;
        }

        swan.setStorage({
            key,
            data: this.getData('value'),
            success: res => {
                this.toast('存儲成功', 'none');
                this.setData('disabled', false);
            },
            fail: err => {
                this.toast('存儲數(shù)據(jù)失敗');
            }
        });
    },
    getStorage() {
        let key = this.hasKey();
        if (!key) {
            return;
        }

        swan.getStorage({
            key,
            success: res => {
                const data = res.data;
                if (data) {
                    swan.showModal({
                        title: '數(shù)據(jù)信息',
                        content: `${key}: ${data}`,
                        showCancel: false
                    });
                }
                else {
                    this.toast('找不到key對應(yīng)的值');
                }
            },
            fail: err => {
                this.toast('讀取數(shù)據(jù)失敗');
            }
        });
    },
    hasKey() {
        let key = this.getData('key');
        if (key) {
            return key;
        }

        this.toast('key不能為空');
    },
    toast(title, icon = 'none') {
        swan.showToast({title, icon});
    }
});

參考示例

參考示例 1： 利用本地緩存提前渲染界面

業(yè)務(wù)場景：我們實(shí)現(xiàn)的小程序首頁是展示一堆商品的列表。數(shù)據(jù)渲染的方式一般是在頁面 onLoad 回調(diào)之后通過 swan.request 向服務(wù)器發(fā)起一個(gè)請求去拉取列表數(shù)據(jù)，在 success 回調(diào)中把數(shù)據(jù)通過 setData 渲染到界面上，如下代碼所示。

Page({
    onLoad() {
        swan.request({
            url: 'https://www.baidu.com/xxx', // 僅為示例，并非真實(shí)的接口地址
            success: res => {
                if (res.statusCode === 200) {
                    this.setData({
                        list: res.data.list
                    })
                }
            }
        })
    }
})

在請求到數(shù)據(jù)前，我們避免頁面白屏的方式一般是把之前的請求成功請求存在本地緩存里，在 onLoad 發(fā)起請求前，先檢查是否有緩存過列表，如果有的話直接渲染界面，然后等到 swan.request 的 success 回調(diào)之后再覆蓋本地緩存重新渲染新的列表，如下代碼所示。

Page({
    onLoad() {
        let list = swan.getStorageSync('list');
        if (list) { // 本地如果有緩存列表，提前渲染
            this.setData({
                list: list
            })
        }

        swan.request({
            url: 'https://www.baidu.com/xxx', // 僅為示例，并非真實(shí)的接口地址
            success: res => {
                if (res.statusCode === 200) {
                    list = res.data.list;
                    this.setData({ // 再次渲染列表
                        list: list
                    })
                    swan.setStorageSync("list", list); // 覆蓋緩存數(shù)據(jù)
                }
            }
        })
    }
})

錯(cuò)誤碼

Android

iOS