uniapp中的uni.setStorage和uni.setStorageSync vue2

在UniApp中，`uni.setStorageSync` 和 `uni.setStorage` 是用于存储数据到本地缓存（key-value形式）的方法，它们分别对应同步和异步操作。当你需要设置数据并且关心结果时，可以使用这两个函数。 `uni.setStorageSync(key, value)` 是用于将值保存到本地，并且会立即返回，不会触发回调。如果你想要在设置成功后执行一些操作，一般不需要显式处理 success 或 fail 回调。 然而，对于 `uni.setStorage(key, value, { success: callback, fail: errCallback })` 这种异步版本的调用，你需要提供一个 success 回调函数，当存储操作完成且成功时会被执行。如果发生错误，则会执行 fail 回调，传入一个错误对象。这是一个示例： ```javascript uni.setStorage({ key: 'yourKey', value: 'yourValue', success: function(res) { console.log('存储数据成功:', res); // 在这里你可以执行其他成功的操作 }, fail: function(err) { console.error('存储数据失败:', err); // 处理错误的情况 } }); ``` 需要注意的是，在Vue2中，因为异步操作通常发生在生命周期钩子之外，所以你可能需要结合Vuex或者事件总线来管理状态的变化和回调处理。

### uni.setStorageSync 的持久化存储机制 `uni.setStorageSync` 是 UniApp 提供的一个用于本地存储的方法，其作用是将数据同步保存到设备的本地缓存中[^1]。通过该方法存储的数据会一直存在于用户的设备上，直到被显式删除（例如调用 `uni.removeStorageSync` 或者 `uni.clearStorageSync`），或者用户手动清理应用缓存。 #### 数据存储位置 在不同平台下，`uni.setStorageSync` 存储的数据实际位于不同的地方： - **微信小程序**: 数据会被存储在微信客户端提供的沙盒环境中。 - **H5**: 数据通常会被存储在浏览器的 `localStorage` 中。 - **Android/iOS App**: 数据会被存储在应用专属的文件系统区域，其他应用无法访问这些数据。 由于上述特性，`uni.setStorageSync` 实现了真正的持久化存储功能。即使用户关闭应用或重启设备，只要未主动清除缓存，数据仍然存在并可随时读取。 #### 使用场景与注意事项 以下是关于 `uni.setStorageSync` 的一些常见使用场景及其需要注意的地方： 1. **简单数据存储** 可以用来存储简单的键值对数据，比如用户的偏好设置、登录状态等。 ```javascript uni.setStorageSync('isDarkMode', true); // 设置深色模式开关 ``` 2. **复杂对象存储** 支持 JSON 序列化的任意类型数据都可以存储。对于复杂的 JavaScript 对象，在写入前会被自动转换为 JSON 字符串。 ```javascript const userInfo = { name: 'John Doe', age: 30, email: '[email protected]' }; uni.setStorageSync('userInfo', userInfo); ``` 3. **性能考虑** 虽然 `uni.setStorageSync` 是同步操作，但在大多数情况下不会显著影响性能，因为它是轻量级的操作。然而，当处理非常庞大的数据集时，建议改用异步版本 `uni.setStorage` 来避免阻塞主线程。 4. **安全性** 需要注意的是，`uni.setStorageSync` 并不提供加密保护。因此不适合存储敏感信息，如密码或其他隐私数据。如果确实需要安全存储，则应结合加解密算法进行额外的安全防护[^3]。 #### Vuex 结合持久化存储的应用案例 为了进一步增强用户体验，开发者经常会在 VueX 状态管理器的基础上集成持久化存储能力。具体做法是在 Vuex 的 mutation 方法中调用 `uni.setStorageSync` 将重要状态保存至本地缓存[^2]。这样即便页面刷新或重新启动应用，也可以快速恢复之前的状态。 ```javascript // store/index.js 示例代码片段 import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { token: '', userInfo: {} }, mutations: { setToken(state, payload) { state.token = payload; uni.setStorageSync('token', payload); // 持久化存储 Token }, clearData(state) { state.token = ''; state.userInfo = {}; uni.removeStorageSync('token'); // 清理 Token 缓存 uni.removeStorageSync('userInfo'); // 清理 UserInfo 缓存 } } }); ``` 以上示例展示了如何利用 `uni.setStorageSync` 和 `uni.removeStorageSync` 完成登录态的持久化以及登出后的清理工作。 --- ###