欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-03-03 21:54:19
...

什么是 Cookie？

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

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。
  1. Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:
  2. 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
  3. 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

效果演示

用cookie实现简单的用户自定义页面样式
代码演示如下：
首先创建一个one.html

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <title>用户自定义页面样式</title>
    6. 

  6.         <script src="cookie.js"></script>
    7. 

  7.         <style type="text/css">
    8. 

  8.             a{
    9. 

  9.                 color: #000000;
    10. 

  10.                 text-decoration: none;
    11. 

  11.                 transition: all .5s;
    12. 

  12.             }
    13. 

  13.             a:hover{
    14. 

  14.                 background-color: #f3f3f3;
    15. 

  15.             }
    16. 

  16.         </style>
    17. 

  17.     </head>
    18. 

  18.     <body>
    19. 

  19.         <input type="button" onclick="setBgColor('red')" value="设置页面背景色">
    20. 

  20.         <input type="button" onclick="setFontColor('yellow')" value="设置字体色">
    21. 

  21.         <p><a href="two.html">点击跳转到自定义样式的页面</a></p>
    22. 

  22.         <script>
    23. 

  23.             function setBgColor() {
    24. 

  24.                 color = window.prompt("请输入页面背景颜色");
    25. 

  25.              setCookie('bgcolor', color, 3);
    26. 

  26.             }
    27. 

    28. 

  28.             function setFontColor(color) {
    29. 

  29.                 color = window.prompt("请输入字体颜色");
    30. 

  30.                 setCookie('fontcolor', color, 3);
    31. 

  31.             }
    32. 

  32.         </script>
    33. 

  33.     </body>
    34. 

  34. </html>
    35.

然后是two.html

    

  1. <!DOCTYPE html>
    2. 

  2. <html>
    3. 

  3.     <head>
    4. 

  4.         <meta charset="utf-8">
    5. 

  5.         <title>自定义过后的页面样式</title>
    6. 

  6.         <style id="st"></style>
    7. 

  7.         <script src="cookie.js"></script>
    8. 

  8.     </head>
    9. 

  9.     <body>
    10. 

  10.         <h1>这是一个h1标签</h1>
    11. 

  11.         <h2>这是一个h2标签</h2>
    12. 

  12.         <p>这是一个段落标签</p>
    13. 

  13.     </body>
    14. 

  14.     <script>
    15. 

  15.         window.onload = function() {
    16. 

  16.             var bgcolor = getCookie('bgcolor');
    17. 

  17.             var fontcolor = getCookie('fontcolor');
    18. 

  18.             var stobj = document.getElementById('st');
    19. 

  19.             stobj.innerText = ' * {background-color:' + bgcolor + ';color:' + fontcolor + ';}';
    20. 

  20.         }
    21. 

  21.     </script>
    22. 

  22. </html>
    23.

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

    

  1. //设置cookie
    2. 

  2. function setCookie(cname,cvalue,exdays){
    3. 

  3.     var d = new Date();
    4. 

  4.     d.setTime(d.getTime()+(exdays*24*60*60*1000));
    5. 

  5.     var expires = "expires="+d.toGMTString();
    6. 

  6.     document.cookie = cname+"="+cvalue+"; "+expires;
    7. 

  7. }
    8. 

  8. //获取cookie
    9. 

  9. function getCookie(cname){
    10. 

  10.     var name = cname + "=";
    11. 

  11.     console.log(name);
    12. 

  12.     var ca = document.cookie.split(';');
    13. 

  13.     for(var i=0; i<ca.length; i++) {
    14. 

  14.         var c = ca[i].trim();
    15. 

  15.         if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    16. 

  16.     }
    17. 

  17.     return "";
    18. 

  18. }
    19.

上一篇： js 自定义获取指定类名的标签集合

下一篇： 固定导航栏

推荐阅读