使用 localStorage 记住“自动定位”开关状态：页面加载时读取并设置初始值，默认开启；开关变化时存布尔值字符串，封装安全读写函数处理不支持场景，统一管理状态并同步 UI。
用 localStorage 记住用户是否开启“自动定位”功能，只需在开关状态变化时存值，页面加载时读取并还原即可。关键在于统一管理状态、及时同步 UI，并处理浏览器不支持等边界情况。
初始化时读取并设置开关状态
页面加载后立即检查 localStorage 中是否已保存偏好。如果有，就按保存的值设置开关的 checked 状态和对应逻辑；如果没有，则使用默认值（如开启定位）。
示例代码：
function initLocationToggle() {
const toggle = document.getElementById('auto-location-toggle');
const saved = localStorage.getItem('weather_auto_location_enabled');
if (saved !== null) {
toggle.checked = saved === 'true';
} else {
toggle.checked = true; // 默认开启
}
updateLocationBehavior(toggle.checked);
}
监听开关变化并持久化保存
为开关元素绑定 change 事件，在用户点击时把当前状态写入 localStorage，确保刷新后仍生效。
建议操作：
- 使用
toggle.checked获取布尔值，转成字符串再存（localStorage只支持字符串） - 调用业务函数（如
updateLocationBehavior()）同步执行定位逻辑 - 避免在
click上监听——change更准确，尤其对 checkbox 和 switch 类型控件
封装读写操作提升可维护性
把存储逻辑抽成独立函数，方便复用和测试，也便于未来切换存储方式（如换成 IndexedDB）。
const prefs = {
getAutoLocation() {
const v = localStorage.getItem('weather_auto_location_enabled');
return v === 'true';
},
setAutoLocation(enabled) {
localStorage.setItem('weather_auto_location_enabled', String(enabled));
}
};
// 使用时
document.getElementById('auto-location-toggle').addEventListener('change', e => {
prefs.setAutoLocation(e.target.checked);
updateLocationBehavior(e.target.checked);
});
兼容性与降级处理
部分旧浏览器或无痕模式可能禁用 localStorage。需加 try-catch 并提供内存级 fallback。
简单健壮写法：
function safeSetItem(key, value) {
try {
localStorage.setItem(key, value);
} catch (e) {
console.warn('localStorage not available, using in-memory fallback');
// 可选：用全局变量暂存，但刷新即丢失
window.__prefs = window.__prefs || {};
window.__prefs[key] = value;
}
}
function safeGetItem(key) {
try {
return localStorage.getItem(key);
} catch (e) {
return window.__prefs?.[key] || null;
}
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
