swan.setStorage

解释:将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容。主动删除历史小程序,卸载 百度 APP,或在系统中清除百度 app 的缓存即可清除数据。目前单个 key 允许存储的最大数据长度无限制,没有自动清理存储机制。storage 上限 10MB,用户需主动清理,期间数据一直可用。

# 方法参数

Object object

# object参数说明

属性名 类型 必填 默认值 说明
key String 本地缓存中的指定的 key
data Object/String/Number/Array 需要存储的内容
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

# 代码示例 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">存储数据</button>
                <button bindtap="getStorage" type="primary" hover-stop-propagation="true" disabled="{{disabled}}">读取数据</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('存储数据失败');
                }
            });
        },
        getStorage() {
            let key = this.hasKey();
            if (!key) {
                return;
            }
    
            swan.getStorage({
                key,
                success: res => {
                    const data = res.data;
                    if (data) {
                        swan.showModal({
                            title: '数据信息',
                            content: `${key}: ${data}`,
                            showCancel: false
                        });
                    }
                    else {
                        this.toast('找不到key对应的值');
                    }
                },
                fail: err => {
                    this.toast('读取数据失败');
                }
            });
        },
        hasKey() {
            let key = this.getData('key');
            if (key) {
                return key;
            }
    
            this.toast('key不能为空');
        },
        toast(title, icon = 'none') {
            swan.showToast({title, icon});
        }
    });
    
    

    # 参考示例

    # 参考示例 1: 利用本地缓存提前渲染界面

    业务场景:我们实现的小程序首页是展示一堆商品的列表。数据渲染的方式一般是在页面 onLoad 回调之后通过 swan.request 向服务器发起一个请求去拉取列表数据,在 success 回调中把数据通过 setData 渲染到界面上,如下代码所示。

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

      在请求到数据前,我们避免页面白屏的方式一般是把之前的请求成功请求存在本地缓存里,在 onLoad 发起请求前,先检查是否有缓存过列表,如果有的话直接渲染界面,然后等到 swan.request 的 success 回调之后再覆盖本地缓存重新渲染新的列表,如下代码所示。

        Page({
            onLoad() {
                let list = swan.getStorageSync('list');
                if (list) { // 本地如果有缓存列表,提前渲染
                    this.setData({
                        list: list
                    })
                }
        
                swan.request({
                    url: 'https://www.baidu.com/xxx', // 仅为示例,并非真实的接口地址
                    success: res => {
                        if (res.statusCode === 200) {
                            list = res.data.list;
                            this.setData({ // 再次渲染列表
                                list: list
                            })
                            swan.setStorageSync("list", list); // 覆盖缓存数据
                        }
                    }
                })
            }
        })
        

        # 错误码

        # Android

        错误码 说明
        201 解析失败,请检查调起协议是否合法
        1001 执行失败

        # iOS

        错误码 说明
        202 解析失败,请检查参数是否正确
        1003 超过最大存储文件大小