uni-halo/.agents/bak-skills/uniappx-project/examples/api/storage/get-storage.md

uni.getStorage - 获取存储数据示例

官方文档

参考官方文档：https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage

概述

uni.getStorage 用于从本地缓存中异步获取指定 key 的内容。

基础用法

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

完整示例

示例 1: 获取用户信息

uni.getStorage({
  key: 'userInfo',
  success: (res) => {
    const userInfo = res.data
    console.log('用户信息', userInfo)
    // 使用用户信息
  },
  fail: (err) => {
    console.error('获取失败', err)
    // 数据不存在或获取失败
  }
})

示例 2: 获取字符串

uni.getStorage({
  key: 'token',
  success: (res) => {
    const token = res.data
    console.log('Token', token)
    // 使用 token
  }
})

示例 3: 获取数组

uni.getStorage({
  key: 'shoppingCart',
  success: (res) => {
    const cart = res.data || []
    console.log('购物车', cart)
  }
})

示例 4: 封装获取函数

// utils/storage.js
const storage = {
  get(key) {
    return new Promise((resolve, reject) => {
      uni.getStorage({
        key: key,
        success: (res) => {
          resolve(res.data)
        },
        fail: (err) => {
          if (err.errMsg.includes('data not found')) {
            resolve(null) // 数据不存在返回 null
          } else {
            reject(err)
          }
        }
      })
    })
  }
}

// 使用
storage.get('userInfo')
  .then(data => {
    if (data) {
      console.log('用户信息', data)
    } else {
      console.log('数据不存在')
    }
  })
  .catch(err => {
    console.error('获取失败', err)
  })

示例 5: 在页面中使用

<template>
  <view class="container">
    <button @click="loadUserInfo">加载用户信息</button>
    <view v-if="userInfo" class="user-info">
      <text>用户名：{{ userInfo.name }}</text>
      <text>邮箱：{{ userInfo.email }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null
    }
  },
  onLoad() {
    this.loadUserInfo()
  },
  methods: {
    loadUserInfo() {
      uni.getStorage({
        key: 'userInfo',
        success: (res) => {
          this.userInfo = res.data
        },
        fail: () => {
          uni.showToast({
            title: '未登录',
            icon: 'none'
          })
        }
      })
    }
  }
}
</script>

同步版本

使用 uni.getStorageSync 进行同步获取：

try {
  const userInfo = uni.getStorageSync('userInfo')
  if (userInfo) {
    console.log('用户信息', userInfo)
  } else {
    console.log('数据不存在')
  }
} catch (err) {
  console.error('获取失败', err)
}

注意事项

1. 如果 key 不存在，会触发 fail 回调
2. 建议使用 try-catch 处理同步接口的错误
3. 获取的数据类型与存储时一致
4. 异步接口不会阻塞后续代码执行

参考资源

• 官方文档: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstorage
• 同步版本: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#getstoragesync
• 设置存储: https://doc.dcloud.net.cn/uni-app-x/api/storage/storage.html#setstorage