XiaowenBlog/source/js/sakura-toggle.js
wenyongda 0ba2caea01 feat(樱花特效): 添加本地存储功能以保存用户偏好
添加 localStorage 支持来持久化樱花特效的显示状态
修复首次加载时特效状态未正确应用的问题
2026-04-14 11:14:39 +08:00

67 lines
2.0 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

// 樱花特效切换按钮 - 添加到 rightside 设置区域
const SAKURA_STORAGE_KEY = 'sakura_effect_enabled';
// 获取保存的状态,默认为 true显示
function getSakuraState() {
const saved = localStorage.getItem(SAKURA_STORAGE_KEY);
// 如果没有保存过,默认显示
return saved === null ? true : saved === 'true';
}
// 保存状态到 localStorage
function saveSakuraState(enabled) {
localStorage.setItem(SAKURA_STORAGE_KEY, enabled.toString());
}
// 应用樱花特效状态
function applySakuraState() {
const sakuraEffect = document.getElementById('canvas_sakura');
if (sakuraEffect) {
const enabled = getSakuraState();
sakuraEffect.style.display = enabled ? 'block' : 'none';
}
}
function createSakuraBtn() {
// 检查按钮是否已存在
if (document.getElementById('toggle_sakura_btn')) return;
const sakuraBtn = document.createElement('button');
sakuraBtn.id = 'toggle_sakura_btn';
sakuraBtn.type = 'button';
sakuraBtn.title = '樱花特效切换';
sakuraBtn.innerHTML = '<i class="fas fa-leaf"></i>';
const hideArea = document.getElementById('rightside-config-hide');
if (hideArea) {
hideArea.appendChild(sakuraBtn);
}
// 应用保存的状态
applySakuraState();
// 点击切换
sakuraBtn.addEventListener('click', function() {
const sakuraEffect = document.getElementById('canvas_sakura');
if (sakuraEffect) {
const isHidden = window.getComputedStyle(sakuraEffect).display === 'none';
const newState = isHidden ? true : false;
sakuraEffect.style.display = newState ? 'block' : 'none';
// 保存状态到 localStorage
saveSakuraState(newState);
}
});
}
// 首次加载
document.addEventListener('DOMContentLoaded', function() {
createSakuraBtn();
// 确保 sakura.js 加载完成后应用状态
setTimeout(applySakuraState, 100);
});
// PJAX 页面切换后重新创建
document.addEventListener('pjax:complete', function() {
createSakuraBtn();
applySakuraState();
});