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);

    });

  • 相关阅读:
    PIE SDK云图动画导出
    PIE SDK地图书签
    PIE SDK元素的保存与打开
    Jenkins简单入门:下载-安装-配置-构建
    Vue.js—60分钟快速入门
    程序员分享学习平台
    IOC+EF+Core项目搭建EF封装(一)
    python+django学习四
    python+django学习三
    Django2.0 应用 Xadmin 报错二
  • 原文地址:https://www.cnblogs.com/wuting/p/8718497.html
Copyright © 2011-2022 走看看