页面切换主题风格，利用本地缓存

最新推荐文章于 2021-09-24 20:29:01 发布

转载最新推荐文章于 2021-09-24 20:29:01 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wuting/p/8718497.html

文章标签：

#数据库

本文介绍了一种使用JavaScript实现网页主题切换的方法，包括如何通过本地存储来保存用户的主题偏好设置，确保用户下次访问网站时能够保持之前的选择。该方案兼容不同类型的浏览器存储API，并提供了简洁的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//默认为黑色主题，全局变量
var saveThemeColor = {
'Name': 'ThemeColor',
'Color': 'darktheme'
}

var storage = getLocalStorage();

// 判断用户是否已有自己选择的主题风格
if (storageLoad('ThemeColor')) {
var themecolor = storageLoad('ThemeColor').Color;

$('body').attr('class',themecolor);

} else {
storageSave(saveThemeColor);
$('body').attr('class', 'darktheme');
}

// 本地缓存
function storageSave(obj) {
storage.setItem(obj.Name, JSON.stringify(obj));
}

function storageLoad(objectName) {
if (storage.getItem(objectName)) {
return JSON.parse(storage.getItem(objectName));
} else {
return false;
}
}

//兼容只支持globalStorage的浏览器
function getLocalStorage(){
if(typeof localStorage == 'object'){
return localStorage;
}else if (typeof globalStorage == 'object') {
return globalStorage[location.host];
} else {
throw new Error('Local storage not available');
}
}

//切换主题
$('.themeli').find('span').on('click',function(){

$('body').attr('class', $(this).attr('data-color'))

saveThemeColor.Color = $(this).attr('data-color');
// 保存选择项
storageSave(saveThemeColor);

});

转载于:https://www.cnblogs.com/wuting/p/8718497.html