博客站

在 UniApp 中，数据缓存是一个常见的需求，用于存储用户数据、应用配置等。UniApp 提供了多种数据缓存的方式，包括 本地存储、全局变量 和 文件存储。以下是 UniApp 实现数据缓存的常用方法：

一、本地存储

UniApp 提供了类似于 Web 的 localStorage 的 API，用于在客户端持久化存储数据。

1. uni.setStorage

• 将数据存储到本地缓存中。
• 示例：

  uni.setStorage({
    key: 'userInfo',
    data: { name: 'UniApp', age: 3 },
    success: () => {
      console.log('数据存储成功');
    }
  });
  

2. uni.getStorage

• 从本地缓存中读取数据。
• 示例：

  uni.getStorage({
    key: 'userInfo',
    success: (res) => {
      console.log('读取的数据：', res.data);
    }
  });
  

3. uni.removeStorage

• 从本地缓存中移除指定数据。
• 示例：

  uni.removeStorage({
    key: 'userInfo',
    success: () => {
      console.log('数据移除成功');
    }
  });
  

4. uni.clearStorage

• 清空本地缓存中的所有数据。
• 示例：

  uni.clearStorage();
  

5. 异步与同步 API

• UniApp 提供了异步和同步两种方式的存储 API：
  • 异步：uni.setStorage、uni.getStorage、uni.removeStorage。
  • 同步：uni.setStorageSync、uni.getStorageSync、uni.removeStorageSync。
• 示例（同步）：

  uni.setStorageSync('userInfo', { name: 'UniApp', age: 3 });
  const userInfo = uni.getStorageSync('userInfo');
  console.log('读取的数据：', userInfo);
  uni.removeStorageSync('userInfo');
  

二、全局变量

对于需要在多个页面间共享的数据，可以使用全局变量。

1. Vuex 状态管理

• Vuex 是 Vue.js 的官方状态管理工具，适合管理复杂的全局数据。
• 示例：

  // store.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  Vue.use(Vuex);
  
  const store = new Vuex.Store({
    state: {
      userInfo: null
    },
    mutations: {
      setUserInfo(state, userInfo) {
        state.userInfo = userInfo;
      }
    }
  });
  
  export default store;
  
  // main.js
  import store from './store';
  const app = new Vue({
    store,
    ...App
  });
  app.$mount();
  
  // 页面中使用
  this.$store.commit('setUserInfo', { name: 'UniApp', age: 3 });
  console.log(this.$store.state.userInfo);
  

2. 全局变量

• 在 App.vue 中定义全局变量。
• 示例：

  // App.vue
  export default {
    globalData: {
      userInfo: null
    }
  };
  
  // 页面中使用
  const app = getApp();
  app.globalData.userInfo = { name: 'UniApp', age: 3 };
  console.log(app.globalData.userInfo);
  

三、文件存储

对于需要持久化存储的大数据（如图片、文件等），可以使用文件存储。

1. uni.saveFile

• 保存文件到本地。
• 示例：

  uni.downloadFile({
    url: 'https://example.com/image.png',
    success: (res) => {
      uni.saveFile({
        tempFilePath: res.tempFilePath,
        success: (saveRes) => {
          console.log('文件保存路径：', saveRes.savedFilePath);
        }
      });
    }
  });
  

2. uni.getSavedFileList

• 获取已保存的文件列表。
• 示例：

  uni.getSavedFileList({
    success: (res) => {
      console.log('文件列表：', res.fileList);
    }
  });
  

3. uni.removeSavedFile

• 删除已保存的文件。
• 示例：

  uni.removeSavedFile({
    filePath: '文件路径',
    success: () => {
      console.log('文件删除成功');
    }
  });
  

四、总结

UniApp 提供了多种数据缓存的方式，开发者可以根据需求选择合适的方法：

• 本地存储：适合存储小规模的持久化数据（如用户信息、配置等）。
• 全局变量：适合在多个页面间共享数据。
• 文件存储：适合存储大文件（如图片、视频等）。

以下是一个完整的示例，展示了本地存储和全局变量的用法：

1. 本地存储

// 存储数据
uni.setStorageSync('userInfo', { name: 'UniApp', age: 3 });

// 读取数据
const userInfo = uni.getStorageSync('userInfo');
console.log('读取的数据：', userInfo);

// 移除数据
uni.removeStorageSync('userInfo');

2. 全局变量

// App.vue
export default {
  globalData: {
    userInfo: null
  }
};

// 页面中使用
const app = getApp();
app.globalData.userInfo = { name: 'UniApp', age: 3 };
console.log(app.globalData.userInfo);

通过合理使用这些方法，可以有效管理 UniApp 中的数据缓存，提升应用性能和用户体验。