用cookie实现简单的用户自定义页面样式

Cookie 是一些数据, 存储于你电脑上的文本文件中。
当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

效果演示

代码演示如下：
首先创建一个one.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户自定义页面样式</title>
        <script src="cookie.js"></script>
        <style type="text/css">
            a{
                color: #000000;
                text-decoration: none;
                transition: all .5s;
            }
            a:hover{
                background-color: #f3f3f3;
            }
        </style>
    </head>
    <body>
        <input type="button" onclick="setBgColor('red')" value="设置页面背景色">
        <input type="button" onclick="setFontColor('yellow')" value="设置字体色">
        <p><a href="two.html">点击跳转到自定义样式的页面</a></p>
        <script>
            function setBgColor() {
                color = window.prompt("请输入页面背景颜色");
             setCookie('bgcolor', color, 3);
            }
            function setFontColor(color) {
                color = window.prompt("请输入字体颜色");
                setCookie('fontcolor', color, 3);
            }
        </script>
    </body>
</html>

然后是two.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义过后的页面样式</title>
        <style id="st"></style>
        <script src="cookie.js"></script>
    </head>
    <body>
        <h1>这是一个h1标签</h1>
        <h2>这是一个h2标签</h2>
        <p>这是一个段落标签</p>
    </body>
    <script>
        window.onload = function() {
            var bgcolor = getCookie('bgcolor');
            var fontcolor = getCookie('fontcolor');
            var stobj = document.getElementById('st');
            stobj.innerText = ' * {background-color:' + bgcolor + ';color:' + fontcolor + ';}';
        }
    </script>
</html>

最后编写设置cookie的js代码，cookie.js

//设置cookie
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
//获取cookie
function getCookie(cname){
    var name = cname + "=";
    console.log(name);
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

效果演示

更多相关文章

随机推荐

用cookie实现简单的用户自定义页面样式

什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

效果演示

更多相关文章

随机推荐