利用浏览器本地存储localStorage进行换肤，改变页面字体颜色样式

发表于 | 分类于 | 阅读次数:

效果

在这里插入图片描述
刷新页面，界面效果依然不会改变。

相关代码

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="setting_tool iconfont">
    <a class="back2top" style="display:none;"><i class="czs-arrow-up-l"></i></a>
    <a class="socolor"><i class="czs-clothes-l"></i></a>
    <div class="c">
        <ul>
            <li class="color undefined">默认</li>
            <li class="color sepia">护眼</li>
            <li class="color night">夜晚</li>
            <li class="hr"></li>
            <li class="font serif">Serif</li>
            <li class="font sans">Sans</li>
        </ul>
    </div>
</div>

javascrip:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$("li.undefined").click(function(){
        localStorage.removeItem('color_style');
        $('.color-style').remove();
        if(localStorage.color_style) $('head').append("<style class='color-style'>" + localStorage.color_style + "</style>");
    });
    $("li.sepia").click(function(){
        localStorage.setItem("color_style", ".menu .menu-item a.current-menu-item {color:#704214;}.article-title h2:hover{color:#361e07}【写你需要的改之后的样式】")
        $('.color-style').remove();
        if(localStorage.color_style) $('head').append("<style class='color-style'>" + localStorage.color_style + "</style>");
    });
    $("li.night").click(function(){
        localStorage.setItem("color_style", ".menu .menu-item a.current-menu-item {color:#bdcadb;}.article-title h2:hover{color:white}【写你需要的改之后的样式】")
        $('.color-style').remove();
        if(localStorage.color_style) $('head').append("<style class='color-style'>" + localStorage.color_style + "</style>");
    });
    $("li.serif").click(function(){
        localStorage.setItem("font_style","body{font-family:serif;}")
        $('.font-style').remove();
        if(localStorage.font_style) $('head').append("<style class='font-style'>" + localStorage.font_style + "</style>");
    });
    $("li.sans").click(function(){
        localStorage.removeItem('font_style');
        $('.font-style').remove();
        if(localStorage.font_style) $('head').append("<style class='font-style'>" + localStorage.font_style + "</style>");
    });

在页面头部添加

1
2
3
4
<script> 
        if(localStorage.color_style) $('head').append("<style class='color-style'>" + localStorage.color_style + "</style>");
        if(localStorage.font_style) $('head').append("<style class='font-style'>" + localStorage.font_style + "</style>"); 
    </script>

原理

点击选择相应的颜色，字体后，添加本地存储localStorage.color_style和localStorage.font_style，用添加的本地存储样式覆盖掉现有的样式，在页面头部添加的js保证刷新跳转后页面样式不变。

本地存储localStorage 相关知识

1、简介
localStorage会可以将数据直接存储到本地，相当于一个5M大小的针对于前端页面的数据库。在IE8以上的IE版本才支持localStorage这个属性。localStorage属于永久性存储，如果存储内容多的话会消耗内存空间，会导致页面变卡。
注意：存入的数据只能以字符串形式存入。

2、存储与清除
// 存储
localStorage.setItem(“font_style”,”body{font-family:serif;}”)

// 清除键值对
localStorage.removeItem(‘color_style’);

// 清空localStorage
localStorage.clear();

3、处理JSON数据
var obj = {“a”: 1,”b”: 2};

// 转化为JSON字符串
obj = JSON.stringify(obj);

//保存
localStorage.setItem(“temp2”, obj);

//JSON字符串转JSON对象
obj=JSON.parse(localStorage.getItem(“temp2”));

0%