[猫头虎分享21天微信小程序基础入门教程] 第14天：小程序的数据存储与本地缓存
![[猫头虎分享21天微信小程序基础入门教程] 第14天：小程序的数据存储与本地缓存](/0.jpg)
[猫头虎分享21天微信小程序基础入门教程] 第14天：小程序的数据存储与本地缓存
第14天：小程序的数据存储与本地缓存 📦自我介绍大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何在小程序中进行数据存储与本地缓存。这些内容可以帮助你在用户设备上存储数据，提高小程序的性能和用户体验。🚀
本地缓存的使用微信小程序提供了多种 API 用于本地数据存储，其中最常用的是 wx.setStorageSync 和 wx.getStorageSync。
一、使用 wx.setStorageSync 和 wx.getStorageSync1. 存储数据代码语言：javascript复制wx.setStorageSync('key', 'value');
wx.setStorageSync('user', { username: '猫头虎', age: 30 });2. 获取数据代码语言：javascript复制const value = wx.getStorageSync('key');
const user = wx.getStorageSync('user');
console.log(value); // 输出: value
console.log(user); // 输出: { username: '猫头虎', age: 30 }3. 删除数据代码语言：javascript复制wx.removeStorageSync('key');4. 清除所有数据代码语言：javascript复制wx.clearStorageSync();二、使用 wx.setStorage 和 wx.getStoragewx.setStorage 和 wx.getStorage 是异步版本的存储和获取方法。
1. 存储数据代码语言：javascript复制wx.setStorage({
key: 'key',
data: 'value',
success() {
console.log('数据存储成功');
},
fail(err) {
console.error('数据存储失败:', err);
}
});2. 获取数据代码语言：javascript复制wx.getStorage({
key: 'key',
success(res) {
console.log('获取数据成功:', res.data);
},
fail(err) {
console.error('获取数据失败:', err);
}
});数据存储的最佳实践一、存储用户数据在小程序中，常见的需求是存储用户数据，例如用户的登录状态、偏好设置等。
1. 存储用户登录状态代码语言：javascript复制// 用户登录后存储登录状态
wx.setStorageSync('isLoggedIn', true);2. 获取用户登录状态代码语言：javascript复制const isLoggedIn = wx.getStorageSync('isLoggedIn');
if (isLoggedIn) {
console.log('用户已登录');
} else {
console.log('用户未登录');
}二、存储应用设置可以使用本地缓存存储一些应用的设置，例如主题、语言等。
1. 存储应用设置代码语言：javascript复制wx.setStorageSync('theme', 'dark');2. 获取应用设置代码语言：javascript复制const theme = wx.getStorageSync('theme');
console.log('当前主题:', theme); // 输出: 当前主题: dark数据同步与异步的选择一、同步存储和获取wx.setStorageSync 和 wx.getStorageSync 是同步方法，操作完成后立即返回结果。适用于简单的、少量的数据存储和获取。
二、异步存储和获取wx.setStorage 和 wx.getStorage 是异步方法，通过回调函数获取操作结果。适用于需要处理较大数据量或者在存储和获取数据时不希望阻塞其他操作的场景。
案例实践三、实现一个简单的备忘录应用1. 页面布局创建一个备忘录页面，包含输入框和列表展示。
wxml 文件：
代码语言：javascript复制
wxss 文件：
代码语言：javascript复制.container {
padding: 20rpx;
}
.memo-list {
margin-top: 20rpx;
}
.memo-item {
display: flex;
justify-content: space-between;
margin-bottom: 10rpx;
padding: 10rpx;
border: 1px solid #ccc;
}2. 处理输入和添加备忘录js 文件：
代码语言：javascript复制Page({
data: {
memo: '',
memos: []
},
onLoad() {
this.loadMemos();
},
handleInput(e) {
this.setData({ memo: e.detail.value });
},
addMemo() {
if (!this.data.memo) return;
const memos = this.data.memos.concat(this.data.memo);
this.setData({ memos, memo: '' });
wx.setStorageSync('memos', memos);
},
removeMemo(e) {
const index = e.currentTarget.dataset.index;
const memos = this.data.memos.filter((_, i) => i !== index);
this.setData({ memos });
wx.setStorageSync('memos', memos);
},
loadMemos() {
const memos = wx.getStorageSync('memos') || [];
this.setData({ memos });
}
});小测试 🧪实现一个包含输入、添加和删除功能的备忘录应用，并使用本地缓存存储数据。尝试在应用中存储一些用户设置，并在页面加载时读取这些设置。今日学习总结 📚概念
详细内容
本地缓存
使用 wx.setStorageSync、wx.getStorageSync 存储和获取数据
数据存储最佳实践
存储用户数据、应用设置
同步与异步存储
选择同步或异步存储和获取数据的方法
结语通过今天的学习，你应该掌握了如何在小程序中进行数据存储与本地缓存。这些技术可以帮助你在用户设备上存储数据，提高小程序的性能和用户体验。明天我们将探讨小程序的网络请求与数据交互。如果你有任何疑问，欢迎关注并留言在我的公众号猫头虎技术团队。📩