目录
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博客
