为两个独立的函数设置本地存储(例如暗光模式),可以使用浏览器的 localStorage
API。以下是一个详细的步骤和示例代码:
localStorage
是一种在客户端存储数据的机制,数据不会过期,除非被显式删除。localStorage
提供了简单的 API 来存储和检索数据。localStorage
只能存储字符串类型的数据,但可以通过 JSON.stringify
和 JSON.parse
来存储和读取复杂对象。假设我们有两个独立的函数 setDarkMode
和 getDarkMode
来管理暗光模式的设置。
// 设置暗光模式
function setDarkMode(enabled) {
localStorage.setItem('darkMode', enabled ? 'true' : 'false');
}
// 获取暗光模式状态
function getDarkMode() {
const darkMode = localStorage.getItem('darkMode');
return darkMode === 'true';
}
// 示例使用
document.getElementById('toggleDarkMode').addEventListener('click', () => {
const isEnabled = getDarkMode();
setDarkMode(!isEnabled);
updateUI(!isEnabled);
});
function updateUI(isDarkMode) {
const body = document.body;
if (isDarkMode) {
body.classList.add('dark-mode');
} else {
body.classList.remove('dark-mode');
}
}
// 初始化UI状态
document.addEventListener('DOMContentLoaded', () => {
updateUI(getDarkMode());
});
为了使暗光模式生效,需要在 CSS 中定义相应的样式:
body.dark-mode {
background-color: #121212;
color: #ffffff;
}
localStorage
时没有抛出异常,可以使用 try-catch
块来捕获和处理错误。localStorage
数据时,确保进行了类型转换和错误处理。function getDarkMode() {
try {
const darkMode = localStorage.getItem('darkMode');
return darkMode === 'true';
} catch (error) {
console.error('Failed to read dark mode from localStorage', error);
return false; // 默认值
}
}
通过这种方式,你可以为两个独立的函数设置和管理本地存储中的暗光模式状态,并且确保在各种情况下都能正确地读取和应用这些设置。
领取专属 10元无门槛券
手把手带您无忧上云