小程序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 区域中保存的两个数据都被清空了，如下：

    

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