Vue框架中uni.getStorageSync 和 uni.setStorageSync的使用

在 UniApp 中，uni.getStorageSync 和 uni.setStorageSync 是用于同步读写本地缓存的 API。它们的特点是：

• 同步操作：直接返回结果，不需要回调函数。

• 适合存储少量数据：比如用户信息、配置项等。

下面我们详细讲解这两个方法的使用，并通过示例帮助你掌握它们。

---

1. uni.setStorageSync(key, data)

• 作用：将数据同步存储到本地缓存中。

• 参数：

  • key：字符串，表示缓存数据的键名。

  • data：需要存储的数据，可以是任意类型（字符串、对象、数组等）。

• 注意事项：

  • 如果存储的数据是对象或数组，UniApp 会自动将其转换为 JSON 字符串。

  • 单个 key 允许存储的最大数据长度为 1MB，所有数据存储总容量为 10MB。

示例代码

javascript

// 存储字符串
uni.setStorageSync('username', 'JohnDoe');// 存储对象
const userInfo = { name: 'John', age: 25 };
uni.setStorageSync('userInfo', userInfo);// 存储数组
const tasks = ['task1', 'task2', 'task3'];
uni.setStorageSync('tasks', tasks);

---

2. uni.getStorageSync(key)

• 作用：从本地缓存中同步读取指定 key 对应的数据。

• 参数：

  • key：字符串，表示缓存数据的键名。

• 返回值：

  • 如果 key 存在，返回对应的数据（如果是 JSON 字符串，会自动转换为对象或数组）。

  • 如果 key 不存在，返回空字符串 ''。

• 注意事项：

  • 如果读取的数据是 JSON 字符串，UniApp 会自动将其解析为对象或数组。

示例代码

javascript

// 读取字符串
const username = uni.getStorageSync('username');
console.log('用户名:', username); // 输出: JohnDoe// 读取对象
const userInfo = uni.getStorageSync('userInfo');
console.log('用户信息:', userInfo); // 输出: { name: 'John', age: 25 }// 读取数组
const tasks = uni.getStorageSync('tasks');
console.log('任务列表:', tasks); // 输出: ['task1', 'task2', 'task3']// 读取不存在的 key
const nonExistent = uni.getStorageSync('nonExistent');
console.log('不存在的 key:', nonExistent); // 输出: ''

---

3. 结合 machineId 的示例

假设我们需要存储和读取设备的 machineId，可以这样做：

存储 machineId

javascript

const machineId = '12345-ABCDE';
uni.setStorageSync('machineId', machineId);
console.log('machineId 已存储');

读取 machineId

javascript

const machineId = uni.getStorageSync('machineId');
if (machineId) {console.log('获取到的 machineId:', machineId);
} else {console.log('未找到 machineId');
}

---

4. 注意事项

1. 数据大小限制：

   • 单个 key 最大支持 1MB 数据。

   • 所有缓存数据总大小不超过 10MB。

2. 数据持久化：

   • 缓存数据会持久化存储，即使关闭小程序或 App，数据仍然存在。

   • 如果需要清除缓存，可以使用 uni.removeStorageSync 或 uni.clearStorageSync。

3. 同步与异步：

   • uni.setStorageSync 和 uni.getStorageSync 是同步方法，会阻塞后续代码执行。

   • 如果需要异步操作，可以使用 uni.setStorage 和 uni.getStorage。

---

5. 完整示例

以下是一个完整的示例，演示如何存储和读取 machineId：

javascript

// 存储 machineId
const storeMachineId = () => {const machineId = '12345-ABCDE';uni.setStorageSync('machineId', machineId);console.log('machineId 已存储:', machineId);
};// 读取 machineId
const getMachineId = () => {const machineId = uni.getStorageSync('machineId');if (machineId) {console.log('获取到的 machineId:', machineId);} else {console.log('未找到 machineId');}
};// 清除 machineId
const clearMachineId = () => {uni.removeStorageSync('machineId');console.log('machineId 已清除');
};// 测试
storeMachineId(); // 存储 machineId
getMachineId();   // 读取 machineId
clearMachineId(); // 清除 machineId
getMachineId();   // 再次读取 machineId

---

6. 总结

• uni.setStorageSync：用于同步存储数据到本地缓存。

• uni.getStorageSync：用于同步读取本地缓存中的数据。

• 这两个方法适合存储少量数据，如用户信息、配置项等。

• 如果需要异步操作，可以使用 uni.setStorage 和 uni.getStorage。

通过以上示例，你应该能够熟练使用 uni.getStorageSync 和 uni.setStorageSync 了！