重庆综合网站建设配件自己做购物网站

小程序本地存储是指在小程序中使用 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 区域中保存的两个数据都被清空了，如下：

    

参考视频：尚硅谷微信小程序开发教程