您的位置: 首页  >  文章  >  小程序开发API之数据缓存

小程序开发API之数据缓存

分类: 文章 • 2024-10-29 10:09:04

异步数据存取

wx.setStorage(Object object)

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。
数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

wx.setStorage参数
小程序开发API之数据缓存

wx.getStorage(Object object)

从本地缓存中异步获取指定 key 的内容
wx.getStorage参数小程序开发API之数据缓存

object.success 回调函数参数res小程序开发API之数据缓存

示例：
index.wxml

<button bindtap='btnClick1' type="primary">异步存setStorage</button>
<button bindtap='btnClick2' type="primary">异步取getStorage</button>

index.wxss

button{
  margin: 20rpx
}

index.js

Page({
  data: {
    
  },
  btnClick1:function(){
    console.log('异步存入key1:value1')
    wx.setStorage({
      key: 'key1',
      data: 'value1'
    })
  },
  btnClick2: function () {
    wx.getStorage({
      key: 'key1',
      success(res) {
        console.log('异步取出key1:',res.data)
      }
    })
  }
})

打印结果

异步存入key1:value1
异步取出key1:value1

##同步数据存取

wx.setStorageSync(string key, any data)

wx.setStorage 的同步版本

  • string key本地缓存中指定的 key
  • any data 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

wx.getStorageSync(string key)

wx.getStorage 的同步版本

  • string key 本地缓存中指定的 key
  • any data key对应的内容

示例
index.wxml

<button bindtap='btnClick3' type="primary">同步存setStorageSync</button>
<button bindtap='btnClick4' type="primary">同步存getStorageSync</button>

index.wxss

button{
  margin: 20rpx
}

index.js

Page({
  data: {
    
  },
  btnClick3: function () {
    console.log('同步存入key2:value2')
    wx.setStorageSync('key2', 'value2')
    /*或者
    try {
          wx.setStorageSync('key2', 'value2')
        } catch (e) { } 
    */
  },
  btnClick4: function () {
    const value = wx.getStorageSync('key2')
    console.log('同步取出key2:',value)
    /*获取
    try {
          const value = wx.getStorageSync('key2')
          if (value) {
            console.log('同步取出key2:',value)
          }
        } catch (e) {
          
        }  
    */
  }
})

打印结果

同步存入key2:value2
同步取出key2: value2

所有缓存数据的

wx.getStorageInfo(Object object)

异步获取当前storage的相关信息

参数Object object小程序开发API之数据缓存

object.success 回调函数参数小程序开发API之数据缓存

wx.getStorageInfoSync()

wx.getStorageInfo 的同步版本小程序开发API之数据缓存

示例：
index.wxml

<button bindtap='btnClick5' type="primary">异步获取所有缓存键值对</button>
<button bindtap='btnClick6' type="primary">同步获取所有缓存键值对</button>

index.wxss

button{
  margin: 20rpx
}

index.js

Page({
  data: {
    
  },
  btnClick5: function () {
    wx.getStorageInfo({
      success(res) {
        console.log(res.keys)       //当前 storage 中所有的 key
        console.log(res.currentSize)//当前占用的空间大小, 单位 KB
        console.log(res.limitSize)  //限制的空间大小，单位 KB
      }
    })
  },
  btnClick6: function () {
    const res = wx.getStorageInfoSync()
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
    /*或者
    try {
          const res = wx.getStorageInfoSync()
          console.log(res.keys)
          console.log(res.currentSize)
          console.log(res.limitSize)
        } catch (e) {
          // Do something when catch error
        }
    */
  }
})

打印结果

异步
[“logs”, “key1”, “key2”]
3
10240
同步
[“logs”, “key1”, “key2”]
3
10240

删除指定Key

wx.removeStorage(Object object)

从本地缓存中移除指定 key（异步）小程序开发API之数据缓存

wx.removeStorageSync(string key)

wx.removeStorage 的同步版本，同步从本地缓存中移除指定 key

  • string key 本地缓存中指定的 key

清理本地数据缓存

wx.clearStorage(Object object)

清理本地数据缓存（异步）小程序开发API之数据缓存

wx.clearStorageSync()

wx.clearStorage 的同步版本，同步清理本地数据缓存

示例：
index.wxml

<button bindtap='btnClick7' type="primary">从本地缓存中移除指定 key</button>
<button bindtap='btnClick8' type="primary">清理本地数据缓存</button>

index.wxss

button{
  margin: 20rpx
}

index.js

Page({
  data: {
    
  },
  btnClick7: function () {
    //异步
    wx.removeStorage({
      key: 'key1',
      success(res) {
        console.log(res.data)
      }
    })
    /*同步
    try {
      wx.removeStorageSync('key')
    } catch (e) {
      // Do something when catch error
    }*/
  },
  btnClick8: function () {
    //异步
    wx.clearStorage()
    /*同步
    try {
          wx.clearStorageSync()
        } catch (e) {
          // Do something when catch error
        }
    */
  }
})

综上：


小程序开发API之数据缓存

示例代码
index.wxml

<button bindtap='btnClick1' type="primary">异步存setStorage</button>
<button bindtap='btnClick2' type="primary">异步取getStorage</button>

<button bindtap='btnClick3' type="primary">同步存setStorageSync</button>
<button bindtap='btnClick4' type="primary">同步存getStorageSync</button>

<button bindtap='btnClick5' type="primary">异步获取所有缓存键值对</button>
<button bindtap='btnClick6' type="primary">同步获取所有缓存键值对</button>

<button bindtap='btnClick7' type="primary">从本地缓存中移除指定 key</button>
<button bindtap='btnClick8' type="primary">清理本地数据缓存</button>

index.wxss

button{
  margin: 20rpx
}

index.js

Page({
  data: {
    
  },
  btnClick1:function(){
    console.log('异步存入key1:value1')
    wx.setStorage({
      key: 'key1',
      data: 'value1'
    })
  },
  btnClick2: function () {
    wx.getStorage({
      key: 'key1',
      success(res) {
        console.log('异步取出key1',res.data)
      }
    })
  },
  btnClick3: function () {
    console.log('同步存入key2:value2')
    wx.setStorageSync('key2', 'value2')
    /*或者
    try {
          wx.setStorageSync('key2', 'value2')
        } catch (e) { } 
    */
  },
  btnClick4: function () {
    const value = wx.getStorageSync('key2')
    console.log('同步取出key2:',value)
    /*获取
    try {
          const value = wx.getStorageSync('key2')
          if (value) {
            console.log('同步取出key2:',value)
          }
        } catch (e) {

        }  
    */
  },
  btnClick5: function () {
    wx.getStorageInfo({
      success(res) {
        console.log(res.keys)       //当前 storage 中所有的 key
        console.log(res.currentSize)//当前占用的空间大小, 单位 KB
        console.log(res.limitSize)  //限制的空间大小，单位 KB
      }
    })
  },
  btnClick6: function () {
    const res = wx.getStorageInfoSync()
    console.log(res.keys)
    console.log(res.currentSize)
    console.log(res.limitSize)
    /*或者
    try {
          const res = wx.getStorageInfoSync()
          console.log(res.keys)
          console.log(res.currentSize)
          console.log(res.limitSize)
        } catch (e) {
          // Do something when catch error
        }
    */
  },
  btnClick7: function () {
    //异步
    wx.removeStorage({
      key: 'key1',
      success(res) {
        console.log(res.data)
      }
    })
    /*同步
    try {
      wx.removeStorageSync('key')
    } catch (e) {
      // Do something when catch error
    }*/
  },
  btnClick8: function () {
    //异步
    wx.clearStorage()
    /*同步
    try {
          wx.clearStorageSync()
        } catch (e) {
          // Do something when catch error
        }
    */
  }
})





相关推荐