zoukankan      html  css  js  c++  java
  • 页面切换主题风格,利用本地缓存

    //默认为黑色主题,全局变量
    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);

    });

  • 相关阅读:
    background-size ie8及以下不兼容的解决方案
    前端
    JavaScript ES(6-11)
    前端工程化
    前端安全漏洞与防范
    Vue源码思维导图
    项目流程总结
    typescript版数据结构与算法库
    tsconfig.json各项配置注解
    Sql server动态加载存储过程--分页
  • 原文地址:https://www.cnblogs.com/wuting/p/8718497.html
Copyright © 2011-2022 走看看