微信小程序怎样进行本地存储的读、写、删、清?同步及异步两种类型

微信小程序提供了本地存储的API,允许开发者在页面上保存用户数据,以便在用户的会话或跨会话中持久化数据。本地存储支持同步和异步两种方式来进行读、写、删、清操作。

同步方式

微信小程序从基础库版本 2.10.0 开始,逐步废弃了同步的本地存储API(如wx.setStorageSyncwx.getStorageSync等),因为这些同步API会阻塞当前线程,可能导致页面卡顿。但了解它们仍然有助于理解概念。

  • 写(存)wx.setStorageSync(key, data)
  • wx.getStorageSync(key)
  • wx.removeStorageSync(key)
  • wx.clearStorageSync()

异步方式

异步方式是目前推荐的存储方式,因为它们不会阻塞主线程,用户体验更好。

  • 写(存)wx.setStorage(Object object)

    复制代码
    wx.setStorage({  
      key: 'key',  
      data: 'value',  
      success(res) {  
        console.log('存储成功');  
      },  
      fail(err) {  
        console.error('存储失败', err);  
      }  
    });
  • wx.getStorage(Object object)

    复制代码
    wx.getStorage({  
      key: 'key',  
      success(res) {  
        console.log('读取成功', res.data);  
      },  
      fail(err) {  
        console.error('读取失败', err);  
      }  
    });
  • wx.removeStorage(Object object)

    复制代码
    wx.removeStorage({  
      key: 'key',  
      success(res) {  
        console.log('删除成功');  
      },  
      fail(err) {  
        console.error('删除失败', err);  
      }  
    });
  • wx.clearStorage(Object object)

    复制代码
    wx.clearStorage({  
      success(res) {  
        console.log('清除成功');  
      },  
      fail(err) {  
        console.error('清除失败', err);  
      }  
    });

注意事项

  • 本地存储的大小限制为每个小程序10MB。
  • 本地存储的数据是保存在用户的设备上的,所以数据不会跨设备同步。
  • 敏感信息不应存储在本地存储中,因为可能会被用户或其他应用访问。
  • 在进行写操作时,如果key已存在,则会被覆盖。
  • 异步方法中的successfail回调是可选的,但推荐总是处理可能的错误情况。

总结

虽然微信小程序提供了同步和异步两种方式进行本地存储的读、写、删、清操作,但推荐使用异步方式,以避免阻塞主线程,提升用户体验。同时,开发者应注意本地存储的限制和安全性问题。

相关推荐
whinc2 天前
🚀 两年小程序开发,我把踩过的坑做成了开源 Skills
前端·微信小程序·ai编程
Lupino2 天前
烧掉 10 刀 API 费,我才明白小程序虚拟列表根本不用“库”!
react.js·微信小程序
小溪彼岸3 天前
是时候给想做小程序的小伙伴泼盆冷水了
微信小程序
远山枫谷4 天前
一文理清页面/组件通信与 Store 全局状态管理
前端·微信小程序
木易士心5 天前
一文读懂:微信小程序云数据库直连原理与使用指南
微信小程序·serverless
明月_清风5 天前
小程序云函数:从入门到全栈的“降维打击”指南
前端·微信小程序·小程序·云开发
拉不动的猪6 天前
移动端调试工具VConsole初始化时的加载阻塞问题
前端·javascript·微信小程序
WangHappy8 天前
不写 Canvas 也能搞定!小程序图片导出的 WebView 通信方案
前端·微信小程序
小时前端8 天前
微信小程序选不了本地文件?用 web-view + H5 一招搞定
前端·微信小程序·uni-app
icebreaker9 天前
Weapp-vite:原生模式之外,多一种 Vue SFC 选择
前端·vue.js·微信小程序