×
13518219792

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

创新互联百度小程序教程：swan.setStorage

swan.setStorage

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

成都创新互联服务项目包括巴楚网站建设、巴楚网站制作、巴楚网页制作以及巴楚网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，巴楚网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到巴楚省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

Web 态说明：受浏览器限制，Web 态 storage 的容量一般为 5MB ，具体视浏览器 localStorage 的容量大小而定。

方法参数

Object object

object 参数说明

属性名 类型 必填 默认值 说明

key

String

是

本地缓存中的指定的 key

data

Object/String/Number/Array/Boolean

是

需要存储的内容

success

Function

否

接口调用成功的回调函数

fail

Function

否

接口调用失败的回调函数

complete

Function

否

接口调用结束的回调函数（调用成功、失败都会执行）

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例

 
 
 
    
  
  
  
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5.  
    6. 
  
  
  
  6.  
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.  
    9. 
  
  
  
  9.  
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11.  
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.  
    14. 
  
  
  
  14.  
    15. 
  
  
  
  15.  
    16. 
  
  
  
    17.

代码示例 2：利用本地缓存提前渲染界面

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

 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  onLoad() {
    3. 
  
  
  
  3.  swan.request({
    4. 
  
  
  
  4.  // 仅为示例，并非真实的接口地址
    5. 
  
  
  
  5.  url: 'https://www.baidu.com/xxx', 
    6. 
  
  
  
  6.  success: res => {
    7. 
  
  
  
  7.  if (res.statusCode === 200) {
    8. 
  
  
  
  8.  this.setData({
    9. 
  
  
  
  9.  list: res.data.list
    10. 
  
  
  
  10.  })
    11. 
  
  
  
  11.  }
    12. 
  
  
  
  12.  }
    13. 
  
  
  
  13.  })
    14. 
  
  
  
  14.  }
    15. 
  
  
  
  15. })
    16.

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

 
 
 
    
  
  
  
  1. Page({
    2. 
  
  
  
  2.  onLoad() {
    3. 
  
  
  
  3.  let list = swan.getStorageSync('list');
    4. 
  
  
  
  4.  if (list) {
    5. 
  
  
  
  5.  // 本地如果有缓存列表，提前渲染 
    6. 
  
  
  
  6.  this.setData({
    7. 
  
  
  
  7.  list: list
    8. 
  
  
  
  8.  })
    9. 
  
  
  
  9.  }
    10. 
  
  
  
    11. 
  
  
  
  11.  swan.request({
    12. 
  
  
  
  12.  // 仅为示例，并非真实的接口地址
    13. 
  
  
  
  13.  url: 'https://www.baidu.com/xxx', 
    14. 
  
  
  
  14.  success: res => {
    15. 
  
  
  
  15.  if (res.statusCode === 200) {
    16. 
  
  
  
  16.  list = res.data.list;
    17. 
  
  
  
  17.  // 再次渲染列表
    18. 
  
  
  
  18.  this.setData({ 
    19. 
  
  
  
  19.  list: list
    20. 
  
  
  
  20.  })
    21. 
  
  
  
  21.  // 覆盖缓存数据
    22. 
  
  
  
  22.  swan.setStorageSync("list", list); 
    23. 
  
  
  
  23.  }
    24. 
  
  
  
  24.  }
    25. 
  
  
  
  25.  })
    26. 
  
  
  
  26.  }
    27. 
  
  
  
  27. })
    28.

错误码

Android

错误码 说明

201

解析失败，请检查调起协议是否合法

1001

执行失败

iOS

错误码 说明

202

解析失败，请检查参数是否正确

1003

超过最大存储文件大小


分享题目：创新互联百度小程序教程：swan.setStorage
网页地址：http://cdbrznjsb.com/article/dhoehgi.html

其他资讯

让你的专属顾问为你服务