微信小程序-Storage

合集 - 微信小程序(60)
1.小程序开发概述2.创建第一个小程序3.微信小程序app.json文件4.微信小程序-sitemap.json文件5.微信小程序app.js文件6.微信小程序app.wxss文件7.微信小程序-project.config.json文件8.微信小程序-页面.json文件9.微信小程序-页面.js文件10.微信小程序-组件创建和使用11.微信小程序-组件-.json文件12.微信小程序-组件-.js文件13.微信小程序-WXSS学什么14.微信小程序-WXSS的书写格式15.微信小程序-新增RPX响应式单位16.微信小程序-什么是WXML17.微信小程序-WXML数据绑定18.微信小程序-WXML条件渲染19.微信小程序-WXML的hidden属性20.微信小程序-WXML列表渲染21.微信小程序-WXML列表渲染Key22.微信小程序-WXML包装元素23.微信小程序-WXS的作用和使用24.微信小程序-WXS独立文件25.微信小程序-WXS支持的语法26.微信小程序-小程序事件绑定27.微信小程序-小程序事件冒泡和事件捕获28.微信小程序-事件传递数据29.微信小程序-data和mark30.微信小程序-touches和changedTouches31.微信小程序-案例练习32.微信小程序-view组件33.微信小程序-text组件34.微信小程序-icon组件35.微信小程序-button组件36.微信小程序-image组件37.微信小程序-scrollview38.微信小程序-image组件-选择相册资源案例39.微信小程序-自定义组件40.微信小程序-自定义组件样式隔离41.微信小程序-自定义组件外部样式42.微信小程序-传递数据父传子43.微信小程序-传递数据子传父44.微信小程序-页面访问组件数据和方法45.微信小程序-组件通讯练习46.微信小程序-单个插槽47.微信小程序-多个插槽-具名插槽48.微信小程序-behaviors49.微信小程序-双线程渲染模型50.微信小程序-页面生命周期51.微信小程序-页面生命周期方法52.微信小程序-组件生命周期方法53.微信小程序-应用程序生命周期方法54.微信小程序-页面跳转Tabbar55.微信小程序-页面跳转navigator组件56.微信小程序-页面跳转wxAPI57.微信小程序-页面跳转数据传递58.微信小程序-常用弹窗
59.微信小程序-Storage
60.微信小程序-获取用户位置
收起

官方文档地址：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() {
        wx.getStorage({
          key: 'age',
          encrypt: true,
          success(res) {
            console.log(res.data)
          }
        })
      }
    })
  }
})

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

?> 2023年6月6日14:53:55，今日，我换了台电脑打开了微信开发者工具测试了如上的 encrypt: true 成功加密了，解决了问题(目前还不知道什么原因造成的)

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')
  }
})

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

应用场景

  • 存完之后立刻需要取，就用同步方法
  • 存完之后不需要立刻取，就用异步方法
posted @   BNTang  阅读(112)  评论(0)  编辑  收藏  举报
相关博文：
·  【UniApp】-uni-app-数据缓存
·  微信小程序云开发
·  微信小程序开发storage操作
·  wx.setStorageSync
·  微信小程序的缓存问题 wx.setStorageSync()
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示