微信小程序开发系列（三十）·小程序本地存储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文件，注释或者删除之前内容，创建四个按钮：

存储获取删除清空

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

button{  margin: 34rpx;}

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

存储获取删除清空

        找到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博客