微信小程序开发系列（三十）·小程序本地存储API·同步和异步的区别

目录

1.  同步API

1.1  getStorageSync存储API

1.2  removeStorageSync获取数据API

1.3  removeStorageSync删除

1.4  clearStorageSync清空

2.  异步API

2.1  setStorage存储API

2.2  getStorage获取数据API

2.3  removeStorage删除API

2.4  clearStorage清空

3.  同步和异步的区别 

---

1.  同步API

        小程序本地存储是指在小程序中使用API将数据存储在用户的设备上，以便小程序运行时和下次启动时快速地读取这些数据。

注意事项：对象类型的数据，可以直接进行存储获取，无需使用 JSON.stringify()、JSON.parse(）转换。

        找到cate.wxml文件，注释或者删除之前内容，创建四个按钮：

<button size="mini" type="primary">存储</button>
<button size="mini" type="default">获取</button>
<button size="mini" type="primary">删除</button>
<button size="mini" type="warn">清空</button>

        此时按钮之间过于拥挤，我们可以找到cate.scss文件，给按键之间添加空隙：

button{
  margin: 34rpx;
}

        再次返回cate.wxml文件，给四个按钮添加事件：

<button size="mini" type="primary" bind:tap="setStorage">存储</button>
<button size="mini" type="default" bind:tap="getStorage">获取</button>
<button size="mini" type="primary" bind:tap="removeStorage">删除</button>
<button size="mini" type="warn" bind:tap="clearStorage">清空</button>

        找到cate.js文件，编写一个事件框架：

Page({
  // 将数据存储到本地
  setStorage(){

  },

  // 获取本地存储的数据
  getStorage(){

  },

  // 删除本地存储的数据
  removeStorage(){

  },

  // 清空本地存储的全部数据
  clearStorage(){

  }
})

1.1  getStorageSync存储API

        将以上代码setStorage()内容给改为：

  // 将数据存储到本地
  setStorage(){

    // 第一个参数：本地存储中指定的key
    // 第二个参数：需要存储的数据
    wx.setStorageSync('num',1)

    // 在小程序中如果存储的是对象类型的数据，可以直接进行存储获取，无需使用 JSON.stringify()、JSON.parse(）转换
    wx.setStorageSync('obj', { name:'tom', age: 10 })
  },

        点击存储，会发现数据正常存储：

1.2  removeStorageSync获取数据API

        将getStorage()代码更改为：

  // 获取本地存储的数据
  getStorage(){

    // 从本地存储的数据中获取指定 key 的数据、内容
    // wx.getStorageSync('num')
    // wx.getStorageSync('obj')

    // 创建变量用于接收数据
    const num = wx.getStorageSync('num')
    const obj = wx.getStorageSync('obj')

    // 打印数据
    console.log(num)
    console.log(obj)
  },

        点击“获取”，可以看到在consle中打印出了获取到的数据：

注意：在这里我们会发现我们没有点存储，但是也能获取到数据，那是因为编译器本身存储的之前的数据，我们可以清空之前的数据，这样就可以了： 

1.3  removeStorageSync删除

        将removeStorage()的函数更改为：

  // 删除本地存储的数据
  removeStorage(){

    // 从本地移除指定key的数据内容
    wx.removeStorageSync('num')
  },

        点击删除：

1.4  clearStorageSync清空

        将clearStorage()更改为：

  // 清空本地存储的全部数据
  clearStorage(){
    wx.clearStorageSync()
  }

        点击清空，数据全部清空：

---

同步API完整Page代码：

Page({
  // 将数据存储到本地
  setStorage(){

    // 第一个参数：本地存储中指定的key
    // 第二个参数：需要存储的数据
    wx.setStorageSync('num',1)

    // 在小程序中如果存储的是对象类型的数据，可以直接进行存储获取，无需使用 JSON.stringify()、JSON.parse(）转换
    wx.setStorageSync('obj', { name:'tom', age: 10 })
  },

  // 获取本地存储的数据
  getStorage(){

    // 从本地存储的数据中获取指定 key 的数据、内容
    // wx.getStorageSync('num')
    // wx.getStorageSync('obj')

    // 创建变量用于接收数据
    const num = wx.getStorageSync('num')
    const obj = wx.getStorageSync('obj')

    // 打印数据
    console.log(num)
    console.log(obj)
  },

  // 删除本地存储的数据
  removeStorage(){

    // 从本地移除指定key的数据内容
    wx.removeStorageSync('num')
  },

  // 清空本地存储的全部数据
  clearStorage(){
    wx.clearStorageSync()
  }
})

2.  异步API

2.1  setStorage存储API

        将setStorage()中的代码改为：

  // 将数据存储到本地
  setStorage(){

  wx.setStorage({
    key: 'num',
    data:1
  })

  wx.setStorage({
    key: 'obj',
    data: { name: 'jerry',age: 18}
  })
  },

        点击存储：

2.2  getStorage获取数据API

        将getStorage()更改为：

  // 获取本地存储的数据
  async getStorage(){
    const obj = await wx.getStorage({
      key:'obj'
    })
    console.log(obj)
  },

        点击获取：

        我们可以看到此时数据在data内，则可以更改代码：

  // 获取本地存储的数据
  async getStorage(){
    const { data } = await wx.getStorage({
      key:'obj'
    })
    console.log(data)
  },

        点击获取：

2.3  removeStorage删除API

        将removeStorage()更改为：

  // 删除本地存储的数据
  removeStorage(){
    wx.removeStorage({
      key:'num'
    })
  },

        点击删除：

2.4  clearStorage清空

         将clearStorage()更改为：

  // 清空本地存储的全部数据
  clearStorage(){
    wx.clearStorage()
  }

        点击清空：

3.  同步和异步的区别 

        小程序本地存储 API 提供了同步和异步两种方式进行数据的读写操作。它们的主要区别在于执行操作时是否会阻塞主线程。

同步方式：在使用同步方式进行本地存储操作时，代码会阻塞主线程的执行，直到本地存储操作完成后才会继续执行后续代码。这意味着如果存储操作需要较长时间，会导致界面出现卡顿现象，影响用户体验。 

异步方式：在使用异步方式进行本地存储操作时，代码会立即返回，不会阻塞主线程的执行，而是通过回调函数或 Promise 来处理存储操作的结果。这样可以避免阻塞主线程，提高程序的流畅性和响应速度。

微信小程序开发_时光の尘的博客-CSDN博客