html页面换肤的简单实例

最新推荐文章于 2022-05-16 23:10:27 发布

phoneball

最新推荐文章于 2022-05-16 23:10:27 发布

阅读量3.7k

点赞数 1

分类专栏： jQuery cookie 网络应用

本文链接：https://blog.youkuaiyun.com/u010914447/article/details/24764875

版权

网络应用同时被 3 个专栏收录

4 篇文章

订阅专栏

jQuery

2 篇文章

订阅专栏

1 篇文章

订阅专栏

本文探讨了如何通过jQuerycookie解决页面换肤功能的性能问题，对比了传统数据库存储方式与cookie存储方式的优劣，并详细介绍了jQuerycookie实现用户自定义皮肤的代码流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

利用iQuery实现简单的页面换肤功能

昨天，王老师突然蹦出个想法：能不能实现地图背景皮肤切换的功能，当时听到这个的时候给我的第一感觉就是腾讯QQ空间自定义皮肤功能。然后他还展示了他以前做过的网站，实现换肤的功能，感觉他做得有点复杂，他把css样式表存放在数据库中的，用户登录进来以后自定义自己中意的皮肤后保存，然后数据库就保存了当前用户的css信息，这样下一次用户再一次进入该网站后就会默认显示上一次用户保存的样式。这个方案固然可行，但是我发现一个最大的问题就是页面加载的速度不是很快，每一次切换后都要从数据库中去读取。

抱着这样的问题，我一直在寻找问题的解决方案。偶然看到网上一篇博文，他是用cookie来保存用户选择的样式表，两个的效果一对比明显的用cookie快了不止一点啊！

下面我分析一下jQery cookie实现保存用户数据的方法

 <script type="text/javascript">
        //换肤方法
        $(function () {
            //为ul中li元素添加点击方法
            $('#selectColor li').click(function () {
                //选择当前样式，移除旧样式
                $("#" + this.id).addClass("selected").siblings().removeClass("selected");
                $('#mycolor').attr("href", "css/" + (this.id) + ".css");
                //将所选的颜色存入cookie中
                $.cookie("MyCookie", this.id, { path: '/', expires: 10 });
            });
            var cookieskin = $.cookie("MyCookie");//初始化cookie的name
            if (cookieskin) {   //判断是否存在name,存在则保存
                $("#" + cookieskin).addClass("selected").siblings().removeClass("selected");
                $('#mycolor').attr("href", "css/" + (cookieskin) + ".css");
                $.cookie("MyCookie", cookieskin, { path: '/', expires: 10 });
            }
        })
    </script>