UniApp各平台 localStorage 容量限制对比
欢迎来到今天的“存储小课堂” 🎓
大家好，我是你们的技术讲师 Qwen。今天我们要聊的是一个非常实用的话题：UniApp 各平台 localStorage 的容量限制。如果你正在开发跨平台应用，或者已经在 UniApp 中遇到了存储问题，那么这篇文章绝对值得你花几分钟读完。
什么是 localStorage？
首先，简单复习一下基础知识。localStorage 是一种浏览器提供的本地存储机制，允许我们在用户的设备上保存一些简单的键值对数据。它的特点是：
- 数据是持久化的，即使用户关闭了浏览器或应用，数据也不会丢失。
- 每个域名有独立的存储空间，不同域名之间不能共享数据。
- 存储的数据是字符串格式，因此如果要存储复杂对象，通常需要使用
JSON.stringify()和JSON.parse()进行序列化和反序列化。
在 UniApp 中，localStorage 可以在多个平台上使用，包括 H5、微信小程序、支付宝小程序、App 等。不过，不同平台对 localStorage 的支持和容量限制有所不同，这就导致了我们在开发时可能会遇到一些“坑”。
各平台 localStorage 容量限制对比
为了让大家更直观地了解各个平台的 localStorage 容量限制，我们先来看一张表格。这张表格汇总了主流平台的 localStorage 容量限制，帮助你在开发时做出更好的决策。
| 平台 | localStorage 容量限制 |
备注 |
|---|---|---|
| H5 (Web) | 5MB (Chrome, Firefox) 10MB (Safari) |
浏览器之间的差异较大，建议不要超过 5MB |
| 微信小程序 | 10MB | 单个 key 的最大长度为 1KB，value 的最大长度为 1MB |
| 支付宝小程序 | 10MB | 单个 key 的最大长度为 1KB，value 的最大长度为 1MB |
| 百度小程序 | 10MB | 单个 key 的最大长度为 1KB，value 的最大长度为 1MB |
| 字节跳动小程序 | 10MB | 单个 key 的最大长度为 1KB，value 的最大长度为 1MB |
| App (iOS/Android) | 无明确限制 | 实际取决于设备的存储空间，但建议不要过度占用 |
从这张表格中我们可以看到，大多数平台的 localStorage 容量限制都在 10MB 左右，但 H5 端的限制相对较小，尤其是在 Safari 浏览器中，容量只有 10MB。此外，微信、支付宝等小程序平台虽然总容量是 10MB，但单个 key 和 value 的大小也有限制，这需要我们在设计数据结构时特别注意。
代码示例：如何优雅地处理 localStorage 存储
接下来，我们来看看如何在 UniApp 中优雅地处理 localStorage 的存储问题。假设我们有一个场景：我们需要存储用户的购物车数据，并且希望确保不会超出平台的容量限制。
1. 检查当前存储的大小
首先，我们需要编写一个函数来检查当前 localStorage 的使用情况。这样可以避免在接近容量上限时发生错误。
function checkLocalStorageSize() {
let size = 0;
for (let key in uni.getStorageSync()) {
if (uni.getStorageSync.hasOwnProperty(key)) {
size += JSON.stringify(uni.getStorageSync(key)).length;
}
}
return size / 1024; // 返回 KB
}这个函数会遍历 localStorage 中的所有键值对，并计算它们的总大小（以 KB 为单位）。你可以根据平台的容量限制，设置一个合理的阈值来提醒用户清理数据。
2. 分页存储大对象
如果我们需要存储较大的对象（例如购物车中的商品列表），直接将整个对象存储在 localStorage 中可能会导致超出容量限制。这时，我们可以考虑将大对象分页存储，每次只存储一部分数据。
function saveCartItems(cartItems, page = 1, pageSize = 100) {
const start = (page - 1) * pageSize;
const end = start + pageSize;
const pageItems = cartItems.slice(start, end);
if (pageItems.length > 0) {
uni.setStorageSync(`cartPage${page}`, pageItems);
}
if (end < cartItems.length) {
// 递归保存下一页
saveCartItems(cartItems, page + 1, pageSize);
}
}
function loadCartItems() {
let allItems = [];
let page = 1;
while (true) {
const pageItems = uni.getStorageSync(`cartPage${page}`);
if (!pageItems) break;
allItems = allItems.concat(pageItems);
page++;
}
return allItems;
}通过这种方式，我们可以将大对象分割成多个小块进行存储，避免一次性存储过多数据。同时，在读取时也可以按需加载，提升性能。
3. 使用 IndexedDB 或 SQLite 作为替代方案
如果你的应用需要存储大量数据，或者对数据的操作较为复杂，localStorage 可能并不是最佳选择。此时，你可以考虑使用更强大的存储方案，比如 IndexedDB 或 SQLite。
-
IndexedDB 是一种基于 JavaScript 的 NoSQL 数据库，支持复杂的查询和事务操作。它在 H5 端有较好的支持，但在小程序和 App 中可能需要额外的适配。
-
SQLite 是一种轻量级的关系型数据库，适合用于移动应用。UniApp 提供了对 SQLite 的原生支持，可以在 App 端使用。
// 使用 IndexedDB 存储数据
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
const db = event.target.result;
const objectStore = db.createObjectStore('cartItems', { keyPath: 'id' });
};
request.onsuccess = function(event) {
const db = event.target.result;
const transaction = db.transaction(['cartItems'], 'readwrite');
const store = transaction.objectStore('cartItems');
// 插入数据
store.add({ id: 1, name: 'iPhone 13', price: 7999 });
// 查询数据
const request = store.get(1);
request.onsuccess = function(event) {
console.log('查询结果:', event.target.result);
};
};结语：选择合适的存储策略
通过今天的分享，相信大家对 UniApp 各平台 localStorage 的容量限制有了更清晰的认识。虽然 localStorage 是一个非常方便的存储工具，但在实际开发中，我们还是要根据具体需求选择合适的存储策略。对于小量数据，localStorage 足够胜任；而对于大量数据或复杂操作，IndexedDB 或 SQLite 可能是更好的选择。
最后，希望大家在开发过程中能够合理利用这些工具，避免因为存储问题而影响用户体验 😊
如果有任何问题或想法，欢迎在评论区留言讨论！下次见啦，各位开发者们 👋
