cookie 保存和清除用户样式

程序员文章站 2022-03-03 22:45:19

...


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .container {
            border: 1px solid #ccc;
            width: 300px;
            margin: 20px auto;
            text-align: center;
        }

        .container > h1 {
            margin: 100px auto;
        }

        body > form {
            width: 350px;
            margin: 20px auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>

</head>
<body>

<form action="">
    <div>
        <div>
            <label for="bg">背景 rgb</label>
            <input type="text" name="bg1" id="bg1" size="3" value="255">
            <input type="text" name="bg2" id="bg2" size="3" value="255">
            <input type="text" name="bg3" id="bg3" size="3" value="255">
        </div>
        <div>
            <label for="color">字体 rgb</label>
            <input type="text" name="color1" id="color1" size="3" value="0">
            <input type="text" name="color2" id="color2" size="3" value="0">
            <input type="text" name="color3" id="color3" size="3" value="0">
        </div>
    </div>
    <div>
        <input type="button" value="确定" id="ensure">
        <input type="button" value="清理" id="clear">
    </div>
</form>

<div class="container">
    <h1 class="text">Hello world!</h1>
</div>

<script>
    window.onload = initialize;

    function initialize() {
        var form = document.forms[0],
            bg1 = getCookie('bg1') || 255,
            bg2 = getCookie('bg2') || 255,
            bg3 = getCookie('bg3') || 255,
            color1 = getCookie('color1') || 0,
            color2 = getCookie('color2') || 0,
            color3 = getCookie('color3') || 0;

        // 表单赋值
        form.bg1.value = bg1;
        form.bg2.value = bg2;
        form.bg3.value = bg3;
        form.color1.value = color1;
        form.color2.value = color2;
        form.color3.value = color3;

        // 修改背景和字体颜色
        document.getElementsByClassName('container')[0].style.backgroundColor = `rgb(${bg1}, ${bg2}, ${bg3})`;
        document.getElementsByClassName('text')[0].style.color = `rgb(${color1}, ${color2}, ${color3})`;

        // 绑定点击改变和删除背景和字体颜色事件
        document.getElementById('ensure').onclick = changeAttr;
        document.getElementById('clear').onclick = removeAttr;
    }

    function changeAttr() {
        var form = document.forms[0],
            bg1 = form.bg1.value,
            bg2 = form.bg2.value,
            bg3 = form.bg3.value,
            color1 = form.color1.value,
            color2 = form.color2.value,
            color3 = form.color3.value;

        // cookie 保存背景
        setCookie('bg1', bg1);
        setCookie('bg2', bg2);
        setCookie('bg3', bg3);

        // cookie 保存字体颜色
        setCookie('color1', color1);
        setCookie('color2', color2);
        setCookie('color3', color3);

        // 修改背景和字体颜色
        document.getElementsByClassName('container')[0].style.backgroundColor = `rgb(${bg1}, ${bg2}, ${bg3})`;
        document.getElementsByClassName('text')[0].style.color = `rgb(${color1}, ${color2}, ${color3})`;
    }

    function removeAttr() {
        // cookie 删除背景
        delCookie('bg1');
        delCookie('bg2');
        delCookie('bg3');

        // cookie 删除字体颜色
        delCookie('color1');
        delCookie('color2');
        delCookie('color3');

        // 页面重载
        location.reload();
    }

    function getCookie(name) {
        var cookies = document.cookie ? document.cookie.split(';') : [];
        for (var i = 0; i < cookies.length; i++) {
            if (0 === cookies[i].trim().indexOf(name)) {
                return cookies[i].trim().split('=')[1].trimLeft();
            }
        }
        return '';
    }

    function setCookie(name, value, expiredays = 30) {
        var cookies = document.cookie ? document.cookie.split(';') : [], date = new Date();
        date.setTime(date.getTime() + expiredays * 24 * 60 * 60 * 1000);

        // 修改存在的 name, expires 值
        for (var i = 0; i < cookies.length; i++) {
            if (0 === cookies[i].trim().indexOf(name)) {
                var existName = true;
                cookies[i] = name + '=' + value;
                continue;
            }
            if (0 === cookies[i].trim().indexOf('expires')) {
                var existExpires = true;
                cookies[i] = 'expires=' + date.toUTCString();
                continue;
            }
            if (0 === cookies[i].trim().indexOf('path')) {
                var existPath = true;
            }
        }

        // 添加未存在的 name, expires, path 值
        if ('undefined' === typeof existName) {
            cookies.unshift(name + '=' + value);
        }
        if ('undefined' === typeof existExpires) {
            cookies.push('expires=' + date.toUTCString());
        }
        if ('undefined' === typeof existPath) {
            cookies.push('path=/');
        }

        // 设置 cookie
        document.cookie = cookies.join(';');
    }

    function delCookie(name) {
        var cookies = document.cookie ? document.cookie.split(';') : [], date = new Date();
        date.setTime(date.getTime() - 1);

        // 删除存在的 name 值，修改 expires 值
        for (var i = 0; i < cookies.length; i++) {
            if (0 === cookies[i].trim().indexOf(name)) {
                cookies.splice(i, 1);
            }
            if (0 === cookies[i].trim().indexOf('expires')) {
                var existExpires = true;
                cookies[i] = 'expires=' + date.toUTCString();
            }
            if (0 === cookies[i].trim().indexOf('path')) {
                var existPath = true;
            }
        }

        // 如果未存在 expires, path 值
        if ('undefined' === typeof existExpires) {
            cookies.push('expires=' + date.toUTCString());
        }
        if ('undefined' === typeof existPath) {
            cookies.push('path=/');
        }

        // 设置 cookie
        document.cookie = cookies.join(';');
    }
</script>

</body>
</html>

cookie 保存和清除用户样式

改变背景黄色和字体红色rgb值

cookie 保存和清除用户样式

刷新页面仍保持黄色背景，红色字体，点击清理，恢复原来样式

上一篇：阿里云怎么隐藏index.php

下一篇： iis5.1怎么安装php

cookie 保存和清除用户样式

用COOKIE保存登录用户信息时，怎样保证COOKIE不被伪造解决办法

php同时使用session和cookie来保存用户登录信息的实现代码，sessioncookie_PHP教程

在jsp页面实现保存登录用户名和密码

php使用cookie保存登录用户名的方法

php 利用cookie实现网页记住用户名和密码的功能

php同时使用session和cookie来保存用户登录信息的实现代码

JS使用cookie保存用户登录信息操作示例

JS使用cookie保存用户登录信息操作示例

如何清除网页上自动保存的登陆用户名密码

搜狗浏览器保存的用户名和密码查看方法图解