Avoid Common uni.storage Pitfalls: Are You Making These Mistakes?

Overview

uni.storage is UniApp's built‑in data‑persistence API. Improper usage may lead to memory leaks, data loss, security vulnerabilities, and performance degradation. The article presents four common pitfalls and corresponding corrective patterns.

Pitfall 1: Storing Large Objects Causes Memory Leaks

<!-- ❌ Wrong: store a large object -->
uni.setStorage({
  key: 'userData',
  data: {
    userInfo: {
      token: 'xxx',
      avatar: 'xxx',
      nickname: 'xxx',
      // ... massive data
    }
  }
})

Problem: Storing a bulky object consumes excessive memory and is hard to manage.

<!-- ✅ Correct: store in small chunks -->
uni.setStorage({ key: 'user_token', data: 'xxx' })
uni.setStorage({ key: 'user_avatar', data: 'xxx' })

By splitting data into separate keys, memory usage stays low and each piece can be accessed independently.

Pitfall 2: Not Setting an Expiration Time

<!-- ❌ Wrong: never expires -->
uni.setStorage({ key: 'token', data: 'xxx' })

Problem: A permanently stored token poses a security risk.

<!-- ✅ Correct: set expiration -->
uni.setStorage({
  key: 'token',
  data: 'xxx',
  time: 7 * 24 * 60 * 60 * 1000 // 7 days
})

Specifying time ensures the data is automatically cleared after the desired period.

Pitfall 3: Frequent Reads/Writes Degrade Performance

<!-- ❌ Wrong: read on every render -->
export default {
  data() { return { userInfo: null } },
  onLoad() { this.loadUserInfo() },
  onShow() { this.loadUserInfo() } // reads each time
}

Solution: Cache the result in a component variable and only read from storage when the cache is empty.

export default {
  data() { return { userInfo: null } },
  onLoad() {
    // Prefer cached data
    if (this.userInfo) {
      this.initData()
    } else {
      this.loadUserInfo()
    }
  }
}

This reduces I/O overhead and improves responsiveness.

Pitfall 4: Ignoring Asynchronous Failures

<!-- ❌ Wrong: ignore errors -->
uni.getStorage({
  key: 'token',
  success: (res) => { console.log(res.data) }
})

Solution: Provide a fail callback to handle read errors.

<!-- ✅ Correct: handle errors -->
uni.getStorage({
  key: 'token',
  success: (res) => { console.log(res.data) },
  fail: (err) => {
    // handle error
    console.error('Storage read failed:', err)
  }
})

Conclusion

Avoid storing large objects – split data into smaller chunks.

Set reasonable expiration times to mitigate security risks.

Prefer local caching – reduce frequent storage reads/writes.

Handle asynchronous failures – improve robustness.