小程序API —— 53 本地存储

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

小程序本地存储的 API 可以分为两类，每一类可以分为四种：

同步 API：
- 存储：wx.setStorageSync()
- 获取：wx.getStorageSync()
- 删除：wx.removeStorageSync()
- 清空：wx.clearStorageSync()
异步 API：
- 存储：wx.setStorage()
- 获取：wx.getStorage()
- 删除：wx.removeStorage()
- 清空：wx.clearStorage()

注意，在微信小程序中，对象类型的数据，可以直接进行存储获取，无需使用 JSON.stringify()、JSON.parse() 转换；

下面我们打开微信开发者工具来演示如何使用这八个 API：

首先演示一下同步 API 用法
- 在 pages/cate/cate.wxml 文件中添加以下代码，用于添加对应的按钮：
```
<button size="mini" plain type="warn" bind:tap="setStorage">存储</button>
<button size="mini" plain type="primary" bind:tap="getStorage">获取</button>
<button size="mini" plain type="warn" bind:tap="removeStorage">删除</button>
<button size="mini" plain type="primary" bind:tap="clearStorage">清空</button>
```
- 在 pages/cate/cate.scss 文件中添加 button 的样式代码，如下：
```
button {margin: 34rpx;
}
```
- 我们首先演示一下同步存储 wx.setStorageSync 的功能，在 pages/cate/cate.js 文件中添加下面代码：
```
Page({// 将数据存储到本地setStorage(){wx.setStorageSync('num', 1);// 存储对象类型，不需要使用 JSON.stringify 和 JSON.parse 转换wx.setStorageSync('obj', {name: 'tom', age: 10})}
}）
```
- 接着点击保存按钮，在右下角选择【storage】，可以看到保存到本地的数据，如下：
- 接着在 pages/cate/cate.js 文件中添加同步获取本地数据的代码，如下：
```
Page({// 将数据存储到本地getStorage(){const num = wx.getStorageSync('num');const obj = wx.getStorageSync('obj');console.log(num);console.log(obj);}
}）
```
- 点击获取按钮，可以在 console 区域中看到打印的信息，如下：
- 接着在 pages/cate/cate.js 文件中添加同步删除本地数据的代码，如下：
```
Page({// 删除本地存储的数据removeStorage(){wx.removeStorageSync('num');}
}）
```
- 当点击删除按钮时，可以看到 storage 中存储的 num 数据被清空，如下：
- 接着在 pages/cate/cate.js 文件中添加同步清空本地数据的代码，如下：
```
Page({// 清空本地存储的全部数据clearStorage(){wx.clearStorageSync();}
}）
```
- 当点击清空按钮时，可以看到 storage 区域中保存的两个数据都被清空了，如下：
接着演示一下异步 API 用法
- 在 pages/cate/cate.wxml 文件中添加以下代码，用于添加对应的按钮：
```
<button size="mini" plain type="warn" bind:tap="setStorage">存储</button>
<button size="mini" plain type="primary" bind:tap="getStorage">获取</button>
<button size="mini" plain type="warn" bind:tap="removeStorage">删除</button>
<button size="mini" plain type="primary" bind:tap="clearStorage">清空</button>
```
- 在 pages/cate/cate.scss 文件中添加 button 的样式代码，如下：
```
button {margin: 34rpx;
}
```
- 我们首先演示一下异步存储 wx.setStorage 的功能，在 pages/cate/cate.js 文件中添加下面代码：
```
Page({// 将数据存储到本地setStorage(){wx.setStorage({key: 'num', data: 1});// 存储对象类型，不需要使用 JSON.stringify 和 JSON.parse 转换wx.setStorage({key: 'obj', data: {name: 'tom', age: 10}});}
}）
```
- 接着点击保存按钮，在右下角选择【storage】，可以看到保存到本地的数据，如下：
- 接着在 pages/cate/cate.js 文件中添加异步获取本地数据的代码，如下：
```
Page({// 获取本地存储的数据async getStorage(){const {data} = await wx.getStorage({key:'obj'});console.log(data);}
}）
```
- 点击获取按钮，可以在 console 区域中看到打印的信息，如下：
- 接着在 pages/cate/cate.js 文件中添加异步删除本地数据的代码，如下：
```
Page({// 删除本地存储的数据removeStorage(){wx.removeStorage({key:'num'});}
}）
```
- 当点击删除按钮时，可以看到 storage 中存储的 num 数据被清空，如下：
- 接着在 pages/cate/cate.js 文件中添加异步清空本地数据的代码，如下：
```
Page({// 清空本地存储的全部数据clearStorage(){wx.clearStorage();}
}）
```
- 当点击清空按钮时，可以看到 storage 区域中保存的两个数据都被清空了，如下：