Uniapp本地存储（uni.setStorage）全面解析与实践指南

在移动应用开发中，本地存储是不可或缺的核心功能之一。作为跨平台开发框架，Uniapp提供了一套完善的本地存储解决方案，使开发者能够轻松实现数据的持久化存储。本文将深入探讨Uniapp本地存储的方方面面，从基础使用到高级技巧，帮助你在实际项目中高效利用这一功能。

一、本地存储的重要性与Uniapp实现

1.1 为什么需要本地存储？

在应用开发中，本地存储解决了几个关键问题：

  • 数据持久化：关闭应用后数据不会丢失

  • 离线访问：无网络时仍能获取关键数据

  • 性能优化：减少网络请求，提升用户体验

  • 状态保持：记住用户偏好和登录状态

1.2 Uniapp本地存储的特点

Uniapp的本地存储系统具有以下优势：

  • 跨平台一致性：一套API在所有平台（H5、小程序、App等）上表现一致

  • 容量更大：相比浏览器localStorage的5MB限制，Uniapp存储空间更大

  • 数据类型丰富：支持存储对象、数组等复杂数据结构

  • 同步/异步双模式：满足不同场景需求

二、Uniapp本地存储核心API详解

2.1 存储数据

异步存储（推荐在需要处理回调时使用）

uni.setStorage({key: 'user_profile',  // 存储键名data: {              // 存储数据（支持多种类型）name: '李四',age: 28,preferences: {theme: 'dark',fontSize: 14}},success: () => {console.log('数据存储成功');uni.showToast({ title: '保存成功', icon: 'success' });},fail: (err) => {console.error('存储失败:', err);uni.showToast({ title: '保存失败', icon: 'none' });}
});

同步存储（适合简单场景）

try {const settings = {notification: true,vibration: false,language: 'zh-CN'};uni.setStorageSync('app_settings', settings);
} catch (e) {console.error('同步存储失败:', e);
}

2.2 获取数据

异步获取

uni.getStorage({key: 'user_profile',success: (res) => {console.log('获取到的数据:', res.data);this.userInfo = res.data;  // 在Vue中绑定到data},fail: (err) => {console.error('数据获取失败:', err);}
});

同步获取

try {const settings = uni.getStorageSync('app_settings');if (settings) {this.notification = settings.notification;// 其他赋值操作...}
} catch (e) {console.error('同步获取失败:', e);
}

2.3 删除数据

异步删除

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

同步删除

try {uni.removeStorageSync('outdated_cache');
} catch (e) {console.error('删除失败:', e);
}

2.4 清空存储

// 异步清空（无回调）
uni.clearStorage();// 同步清空
uni.clearStorageSync();// 实际项目中通常会添加确认提示
function clearAllStorage() {uni.showModal({title: '警告',content: '确定要清除所有本地数据吗？此操作不可撤销！',success: (res) => {if (res.confirm) {uni.clearStorageSync();uni.showToast({ title: '已清除所有数据', icon: 'success' });}}});
}

三、高级应用技巧

3.1 存储加密

对于敏感信息（如token、用户凭证等），建议先加密再存储：

import CryptoJS from 'crypto-js';const SECRET_KEY = 'your-secret-key-123';// 加密存储
function setEncryptedStorage(key, data) {try {const encrypted = CryptoJS.AES.encrypt(JSON.stringify(data), SECRET_KEY).toString();uni.setStorageSync(key, encrypted);return true;} catch (e) {console.error('加密存储失败:', e);return false;}
}// 解密获取
function getDecryptedStorage(key) {try {const encrypted = uni.getStorageSync(key);if (!encrypted) return null;const bytes = CryptoJS.AES.decrypt(encrypted, SECRET_KEY);return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));} catch (e) {console.error('解密失败:', e);return null;}
}

3.2 存储过期策略

实现自动过期的存储机制：

// 带过期时间的存储
function setStorageWithExpiry(key, value, expiryDays) {const now = new Date();const item = {value: value,expiry: now.getTime() + (expiryDays * 24 * 60 * 60 * 1000)};uni.setStorageSync(key, item);
}// 获取并检查过期
function getStorageWithExpiry(key) {const item = uni.getStorageSync(key);if (!item) return null;const now = new Date();if (now.getTime() > item.expiry) {uni.removeStorageSync(key);return null;}return item.value;
}// 使用示例
setStorageWithExpiry('api_cache', apiResponse, 7); // 保存7天
const cachedData = getStorageWithExpiry('api_cache');

3.3 存储空间管理

// 估算已用存储空间
function getStorageSize() {let total = 0;const keys = uni.getStorageInfoSync().keys;keys.forEach(key => {const item = uni.getStorageSync(key);total += JSON.stringify(item).length;});return (total / 1024).toFixed(2) + 'KB';
}// 清理最早存储的X条记录
function cleanupOldestItems(limit) {const keys = uni.getStorageInfoSync().keys;if (keys.length <= limit) return;// 按时间排序（需要存储时记录时间戳）const sortedKeys = keys.map(key => {return {key,time: uni.getStorageSync(key)._timestamp || 0};}).sort((a, b) => a.time - b.time);// 删除最早的for (let i = 0; i < sortedKeys.length - limit; i++) {uni.removeStorageSync(sortedKeys[i].key);}
}

四、性能优化与最佳实践

4.1 存储性能优化

  1. 合理分块：大数据拆分成多个key存储

    // 存储大型数组
function saveLargeArray(key, array, chunkSize = 100) {for (let i = 0; i < array.length; i += chunkSize) {const chunk = array.slice(i, i + chunkSize);uni.setStorageSync(`${key}_chunk_${i/chunkSize}`, chunk);}
}

  2. 避免频繁操作：合并多次存储为单次操作

  3. 使用索引：对大量数据建立索引提高查询效率

4.2 最佳实践

  1. 键名命名规范

    // 推荐使用有意义的命名空间
const STORAGE_KEYS = {USER_INFO: 'app:user:info',SETTINGS: 'app:global:settings',CACHE_PREFIX: 'cache:'
};

  2. 类型安全封装

    class TypedStorage {constructor(key, defaultValue, type) {this.key = key;this.default = defaultValue;this.type = type;}get() {const value = uni.getStorageSync(this.key);if (value === null || value === undefined) return this.default;if (typeof value !== this.type) return this.default;return value;}set(value) {if (typeof value !== this.type) {console.warn(`Invalid type for ${this.key}, expected ${this.type}`);return;}uni.setStorageSync(this.key, value);}
}// 使用示例
const darkMode = new TypedStorage('dark_mode', false, 'boolean');

  3. 错误处理策略

    function safeGetStorage(key, defaultValue) {try {const value = uni.getStorageSync(key);return value !== undefined ? value : defaultValue;} catch (e) {console.error(`获取${key}失败:`, e);return defaultValue;}
}

五、跨平台注意事项

  1. 平台差异处理

    function setCrossPlatformStorage(key, value) {// 小程序端有10MB限制if (process.env.UNI_PLATFORM === 'mp-weixin') {if (JSON.stringify(value).length > 8 * 1024 * 1024) {console.warn('数据大小接近小程序限制');}}uni.setStorageSync(key, value);
}

  2. 兼容性检查

    function checkStorageAvailable() {try {const testKey = '__storage_test__';uni.setStorageSync(testKey, testKey);uni.removeStorageSync(testKey);return true;} catch (e) {return false;}
}

六、实际应用场景

6.1 用户登录状态维护

// 登录成功后
function handleLoginSuccess(userData, token) {const authData = {user: userData,token: token,lastLogin: new Date().getTime()};uni.setStorageSync('auth', authData);this.$store.commit('setAuth', authData); // 同步到Vuex
}// 检查登录状态
function checkAuth() {const auth = uni.getStorageSync('auth');if (!auth || !auth.token) return false;// 检查token是否过期（假设有效期7天）const sevenDays = 7 * 24 * 60 * 60 * 1000;if (new Date().getTime() - auth.lastLogin > sevenDays) {uni.removeStorageSync('auth');return false;}return true;
}

6.2 应用设置持久化

// 设置管理器
const appSettings = {defaults: {theme: 'light',fontSize: 16,notifications: true},init() {const saved = uni.getStorageSync('settings') || {};return { ...this.defaults, ...saved };},save(currentSettings) {uni.setStorageSync('settings', currentSettings);},reset() {uni.setStorageSync('settings', this.defaults);}
};// 在Vue中使用
export default {data() {return {settings: appSettings.init()};},watch: {settings: {deep: true,handler(newVal) {appSettings.save(newVal);}}}
}

6.3 列表数据缓存

// 带缓存的数据加载
async function loadDataWithCache(listType, forceRefresh = false) {const cacheKey = `list_cache_${listType}`;if (!forceRefresh) {const cached = uni.getStorageSync(cacheKey);if (cached) {const { data, timestamp } = cached;// 1小时内使用缓存if (Date.now() - timestamp < 3600000) {return data;}}}// 获取新数据const freshData = await fetchNewData(listType);uni.setStorageSync(cacheKey, {data: freshData,timestamp: Date.now()});return freshData;
}

总结

Uniapp的本地存储系统提供了强大而灵活的数据持久化方案。通过本文的详细介绍，你应该已经掌握了：

  1. 基础API的使用方法和同步/异步模式选择

  2. 数据加密、过期策略等高级技巧

  3. 性能优化和跨平台兼容的最佳实践

  4. 在实际项目中的典型应用场景

合理使用本地存储可以显著提升应用性能，改善用户体验，但也要注意：

  • 不要存储敏感信息（如密码、支付信息等）

  • 重要数据应该有服务器备份

  • 定期清理无用数据避免存储空间浪费

希望本指南能帮助你在Uniapp项目中更高效地使用本地存储功能，打造更出色的跨平台应用。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/87778.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/87778.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

n8n教程：5分钟部署+自动生AI日报并写入飞书多维表格

n8n教程：5分钟部署+自动生AI日报并写入飞书多维表格

哈喽&#xff0c;大家好&#x1f44f; 我是阿星&#xff01; 最近n8n太火了。什么是n8n&#xff1f;有点像扣子和dify的综合体。 简单来说就是替你打工的「自动化工作流」 我们今天就从部署&#x1f449;搭建第一个工作流。用它实现自动抓取新闻并分类。 教程有点长&#x…
阅读更多...
禾纳 AET3152AP 电源MOS IC完全替代TDM3307 替代TDM2307泰德电子料 国产芯片

禾纳 AET3152AP 电源MOS IC完全替代TDM3307 替代TDM2307泰德电子料 国产芯片

禾纳半导体的电源管理芯片AET3152AP不含卤素和锑&#xff0c;符合Rohs标准&#xff0c;应用在交换机切换&#xff0c;便携式/台式机中的电源管理等&#xff0c;可pin to pin替代TDM3307或TDM2307. AET3152AP 封装为PDFN3030 &#xff0c;最小包装数为5000pcs AET3152AP工作温…
阅读更多...
专题：2025信创产业新发展+AI趋势数字化研究报告|附30+份报告PDF汇总下载

专题：2025信创产业新发展+AI趋势数字化研究报告|附30+份报告PDF汇总下载

原文链接&#xff1a;https://tecdat.cn/?p42711 本报告汇总解读聚焦信创产业核心发展脉络&#xff0c;以数据驱动视角剖析技术演进与市场变革。信创产业作为国家数字安全与技术自主可控的核心载体&#xff0c;正经历从“可用”到“好用”的关键跃迁。 本报告洞察基于《亿欧智…
阅读更多...
电子电气架构 --- 分区电子电气架构如何支持软件定义汽车

电子电气架构 --- 分区电子电气架构如何支持软件定义汽车

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 做到欲望极简，了解自己的真实欲望，不受外在潮流的影响，不盲从，不跟风。把自己的精力全部用在自己。一是去掉多余，凡事找规律，基础是诚信；二是…
阅读更多...
【简单】344.反转字符串

【简单】344.反转字符串

题目描述 编写一个函数&#xff0c;其作用是将输入的字符串反转过来。输入字符串以字符数组 s 的形式给出。 不要给另外的数组分配额外的空间&#xff0c;你必须原地修改输入数组、使用 O(1) 的额外空间解决这一问题。 示例 1&#xff1a; 输入&#xff1a;s ["h&quo…
阅读更多...
CVE-2025-24813源码分析与漏洞复现(Tomcat 路径等效漏洞与反序列化RCE)

CVE-2025-24813源码分析与漏洞复现(Tomcat 路径等效漏洞与反序列化RCE)

漏洞概述 漏洞名称&#xff1a;Tomcat 路径等效漏洞反序列化远程代码执行&#xff08;RCE&#xff09; CVE 编号&#xff1a;CVE-2025-24813 CVSS 评分&#xff1a;9.8 影响版本&#xff1a; 9.0.0.M1 ≤ Tomcat ≤ 9.0.9810.1.0-M1 ≤ Tomcat ≤ 10.1.3411.0.0-M1 ≤ Tomcat…
阅读更多...
深入解析：如何实时获取Socket接收缓冲区的数据量

深入解析：如何实时获取Socket接收缓冲区的数据量

在网络编程中&#xff0c;精确掌握接收缓冲区的数据状态是优化性能的关键。本文将揭秘如何跨平台获取socket接收缓冲区的可读数据量&#xff0c;并分析实际应用中的注意事项。 一、核心API&#xff1a;操作系统级数据探针 1. Windows平台方案 #include <winsock2.h>// …
阅读更多...
Edge卸载应用

Edge卸载应用

Edge安装应用后&#xff0c;出现在开始菜单&#xff0c;不能卸载。
阅读更多...
Cursor Rules 的核心定位与作用

Cursor Rules 的核心定位与作用

Cursor Rules 是 AI 编程工具 Cursor IDE 中的核心功能&#xff0c;用于约束 AI 生成代码的行为&#xff0c;确保其符合项目规范、编码风格或特定技术需求。它本质上是一套持久化、可复用的指令集&#xff0c;会动态插入到 AI 模型的上下文提示中&#xff0c;指导其生成代码的逻…
阅读更多...
多线程爬虫优化：快速爬取并写入CSV

多线程爬虫优化：快速爬取并写入CSV

在数据驱动的时代&#xff0c;爬虫技术已成为获取网络数据的重要手段。然而&#xff0c;随着数据量的不断增加&#xff0c;单线程爬虫的效率逐渐难以满足需求。多线程爬虫通过并行处理&#xff0c;能够显著提升爬取速度&#xff0c;同时将数据快速写入CSV文件&#xff0c;为后续…
阅读更多...
Deepseek+墨刀，1min快速生成流程图！

Deepseek+墨刀，1min快速生成流程图！

想要了解快速了解产品逻辑&#xff0c;可以用ds墨刀快速生成流程图~ deepseek链接&#xff1a;https://www.deepseek.com/ 墨刀在线&#xff1a;https://modao.cc/brand 如何操作呢&#xff1f; 1.打开deepseek&#xff0c;输入以下咒语&#xff0c;让AI用Mermaid语法绘制流…
阅读更多...
LangChain4j流式调用、消息注解与会话记忆

LangChain4j流式调用、消息注解与会话记忆

我们先用AiService工具类把调用ai大语言模型的代码写出来。因为AiService工具类中整合有记忆、Rag知识库、tools工具等&#xff0c;我们直接配置调用即可。 我用的是qwen-plus模型。 引入依赖&#xff1a; <dependency><groupId>dev.langchain4j</groupId>…
阅读更多...
NtfsWriteLog函数分析之OpenAttributeTableDump

NtfsWriteLog函数分析之OpenAttributeTableDump

第一部分&#xff1a; NtfsWriteLog( IrpContext, Vcb->MftScb, //注意&#xff1a;Vcb->MftScb NULL, OpenAttributeTableDump, …
阅读更多...
DCM4CHEE ARCHIVE LIGHT 源代码解析(2)－STOWRS

DCM4CHEE ARCHIVE LIGHT 源代码解析(2)－STOWRS

系列文章目录 DCM4CHEE ARCHIVE LIGHT 源代码解析(1)－前言DCM4CHEE ARCHIVE LIGHT 源代码解析(2)－STOWRS文章目录 系列文章目录概述一、背景资料1、RESTful服务2、传输存储规范3、服务连接策略4、响应消息状态二、业务分析1、对象关系2、项目结构3、业务流程三、代码解析1、w…
阅读更多...
Java中间件简介：构建现代软件的“隐形桥梁”

Java中间件简介：构建现代软件的“隐形桥梁”

Java中间件简介&#xff1a;构建现代软件的“隐形桥梁” 在软件开发的世界里&#xff0c;中间件&#xff08;Middleware&#xff09;是一个既熟悉又神秘的存在。它不像数据库那样直接存储数据&#xff0c;也不像前端那样与用户交互&#xff0c;但它却是现代软件架构中不可或缺…
阅读更多...
Scale AI 的王晓磊带着对整个 AI 行业动态的深入了解加入 Meta

Scale AI 的王晓磊带着对整个 AI 行业动态的深入了解加入 Meta

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
冒烟测试概念速解

冒烟测试概念速解

最近很多人对冒烟测试这个概念发出疑问。那么我就来简单解释一下什么是冒烟测试&#xff0c;以及冒烟测试的由来。 1.冒烟测试的由来 硬件测试的起源&#xff1a;从 “冒烟” 到基础功能验证 在电子工程领域&#xff0c;早期工程师在调试新硬件&#xff08;如电路板、芯片&am…
阅读更多...
嵌入式学习笔记——day36-多路IO复用

嵌入式学习笔记——day36-多路IO复用

一、基本概念 &#xff08;服务器多客户端模型&#xff09; 定义&#xff1a; 单线程或单进程同时监测若干个文件描述符是否可以执行IO操作的能力 作用&#xff1a; 应用程序通常需要处理来自多条事件流中的事件&#xff0c;比如我现在用的电脑&#xff0c;需要同时处理键盘鼠…
阅读更多...
微服务数据一致性技术解析：从单体到微服务的数据困局

微服务数据一致性技术解析：从单体到微服务的数据困局

关键词: 微服务数据一致性, 企业应用, 技术架构, 最佳实践 本文基于多位资深架构师在大型互联网公司的实战经验总结&#xff0c;希望能为正在进行微服务改造的团队提供有价值的参考。如果您在实践中遇到问题&#xff0c;欢迎交流讨论&#xff01; 目录 一、引言&#xff1a;从…
阅读更多...
华为云Flexus+DeepSeek征文 | 基于华为云ModelArts Studio搭建Chatbox AI聊天助手

华为云Flexus+DeepSeek征文 | 基于华为云ModelArts Studio搭建Chatbox AI聊天助手

华为云FlexusDeepSeek征文 | 基于华为云ModelArts Studio搭建Chatbox AI聊天助手 引言一、ModelArts Studio平台介绍华为云ModelArts Studio简介ModelArts Studio主要特点 二、Chatbox介绍Chatbox简介主要特点 三、安装Chatbox应用下载Chatbox软件安装Chatbox工具 四、开通Deep…
阅读更多...
最新文章

Copyright @ 2022~2023