微信小程序-Storage

简介: ?> Storage 本地存储,和原生前端开发差不多,单个 Key 允许存储的最大数据长度为 1MB, 所有数据存储上限为 10MB。

官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/storage/wx.setStorageSync.html


?> Storage 本地存储,和原生前端开发差不多,单个 Key 允许存储的最大数据长度为 1MB, 所有数据存储上限为 10MB。


存储数据


?> 带了 Sync 就是同步的方法,没有带就是异步的


setStorageSync/setStorage


将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理,否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB,所有数据存储上限为 10MB。

<!--index.wxml-->
<text>首页</text>
<button bindtap="onStorage">测试 Storage Api</button>


// index.js
Page({
  onStorage() {
    wx.setStorageSync('name', 'BNTang')
    wx.setStorage({
      key: 'age',
      data: 'BNTang',
      encrypt: true,
      success(res) {
        wx.getStorage({
          key: 'age',
          encrypt: true,
          success(res) {
            console.log(res.data)
          }
        })
      }
    })
  }
})


!> encrypt: true 本博主使用的微信开发版本是 2.32.0 存储数据进行加密没有效果,如有人知道为啥还请麻烦引导下


getStorageSync/getStorage

<!--index.wxml-->
...
<button bindtap="onGetStorage">测试 Storage Api Get</button>


// index.js
Page({
  ...
  onGetStorage() {
    let name = wx.getStorageSync('name')
    console.log(name);
    wx.getStorage({
      key: 'name',
      success (res) {
        console.log(res.data)
      }
    })
  }
})


clearStorage/clearStorageSync

<!--index.wxml-->
...
<button bindtap="onClearStorage">测试 Storage Api Clear</button>


// index.js
Page({
  ...
  onClearStorage() {
    wx.clearStorageSync()
    wx.clearStorage()
  }
})


removeStorage/removeStorageSync

<!--index.wxml-->
...
<button bindtap="onRmoveStorage">测试 Storage Api Rmove</button>


// index.js
Page({
  ...
  onRmoveStorage() {
    wx.removeStorage({
      key: 'name',
      success (res) {
        console.log(res)
      }
    });
    wx.removeStorageSync('name')
  }
})


!> 注意点:同步和异步可以交叉使用,也就是说,同步存的可以异步取等等


应用场景

  • 存完之后立刻需要取,就用同步方法
  • 存完之后不需要立刻取,就用异步方法
目录
相关文章
|
小程序 前端开发 JavaScript
微信小程序框架---详细教程
微信小程序框架---详细教程
377 0
|
3月前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
128 3
|
7月前
|
开发框架 移动开发 小程序
【微信小程序】-- 配置uni-app的开发环境(四十八)
【微信小程序】-- 配置uni-app的开发环境(四十八)
|
7月前
|
开发框架 小程序 JavaScript
微信小程序和uni-app的区别
微信小程序和uni-app的区别
162 1
|
7月前
|
小程序 JavaScript 前端开发
微信小程序有几个文件
微信小程序通常由多个文件组成,主要包括以下几种类型的文件:
141 1
|
7月前
|
开发框架 小程序 JavaScript
简单描述下微信小程序的相关文件类型以及微信小程序和uniapp的区别?
简单描述下微信小程序的相关文件类型以及微信小程序和uniapp的区别?
77 0
|
小程序 JavaScript 前端开发
微信小程序开发--this和that的使用
微信小程序开发--this和that的使用
128 0
|
小程序 开发者
微信小程序开发uni-app-8分钟上手开发
微信小程序开发uni-app-8分钟上手开发
90 0
|
小程序 前端开发 Shell
CLI 发行uni-app到微信小程序,如何不打开微信开发者工具去进行小程序发布?(1)
CLI 发行uni-app到微信小程序,如何不打开微信开发者工具去进行小程序发布?(1)
CLI 发行uni-app到微信小程序,如何不打开微信开发者工具去进行小程序发布?(1)
|
小程序 安全 测试技术
浅谈 微信小程序 与 APP 应用的结合
浅谈 微信小程序 与 APP 应用的结合
382 0

相关实验场景

更多