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

cookie 保存和清除用户样式

程序员文章站 2022-03-13 13:53:58
...

cookie 保存和清除用户样式

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

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

  5.     <title>Title</title>
    6. 

    7. 

  7.     <style>
    8. 

  8.         .container {
    9. 

  9.             border: 1px solid #ccc;
    10. 

  10.             width: 300px;
    11. 

  11.             margin: 20px auto;
    12. 

  12.             text-align: center;
    13. 

  13.         }
    14. 

    15. 

  15.         .container > h1 {
    16. 

  16.             margin: 100px auto;
    17. 

  17.         }
    18. 

    19. 

  19.         body > form {
    20. 

  20.             width: 350px;
    21. 

  21.             margin: 20px auto;
    22. 

  22.             display: flex;
    23. 

  23.             justify-content: space-between;
    24. 

  24.             align-items: center;
    25. 

  25.         }
    26. 

  26.     </style>
    27. 

    28. 

  28. </head>
    29. 

  29. <body>
    30. 

    31. 

  31. <form action="">
    32. 

  32.     <div>
    33. 

  33.         <div>
    34. 

  34.             <label for="bg">背景 rgb</label>
    35. 

  35.             <input type="text" name="bg1" id="bg1" size="3" value="255">
    36. 

  36.             <input type="text" name="bg2" id="bg2" size="3" value="255">
    37. 

  37.             <input type="text" name="bg3" id="bg3" size="3" value="255">
    38. 

  38.         </div>
    39. 

  39.         <div>
    40. 

  40.             <label for="color">字体 rgb</label>
    41. 

  41.             <input type="text" name="color1" id="color1" size="3" value="0">
    42. 

  42.             <input type="text" name="color2" id="color2" size="3" value="0">
    43. 

  43.             <input type="text" name="color3" id="color3" size="3" value="0">
    44. 

  44.         </div>
    45. 

  45.     </div>
    46. 

  46.     <div>
    47. 

  47.         <input type="button" value="确定" id="ensure">
    48. 

  48.         <input type="button" value="清理" id="clear">
    49. 

  49.     </div>
    50. 

  50. </form>
    51. 

    52. 

  52. <div class="container">
    53. 

  53.     <h1 class="text">Hello world!</h1>
    54. 

  54. </div>
    55. 

    56. 

  56. <script>
    57. 

  57.     window.onload = initialize;
    58. 

    59. 

  59.     function initialize() {
    60. 

  60.         var form = document.forms[0],
    61. 

  61.             bg1 = getCookie('bg1') || 255,
    62. 

  62.             bg2 = getCookie('bg2') || 255,
    63. 

  63.             bg3 = getCookie('bg3') || 255,
    64. 

  64.             color1 = getCookie('color1') || 0,
    65. 

  65.             color2 = getCookie('color2') || 0,
    66. 

  66.             color3 = getCookie('color3') || 0;
    67. 

    68. 

  68.         // 表单赋值
    69. 

  69.         form.bg1.value = bg1;
    70. 

  70.         form.bg2.value = bg2;
    71. 

  71.         form.bg3.value = bg3;
    72. 

  72.         form.color1.value = color1;
    73. 

  73.         form.color2.value = color2;
    74. 

  74.         form.color3.value = color3;
    75. 

    76. 

  76.         // 修改背景和字体颜色
    77. 

  77.         document.getElementsByClassName('container')[0].style.backgroundColor = `rgb(${bg1}, ${bg2}, ${bg3})`;
    78. 

  78.         document.getElementsByClassName('text')[0].style.color = `rgb(${color1}, ${color2}, ${color3})`;
    79. 

    80. 

  80.         // 绑定点击改变和删除背景和字体颜色事件
    81. 

  81.         document.getElementById('ensure').onclick = changeAttr;
    82. 

  82.         document.getElementById('clear').onclick = removeAttr;
    83. 

  83.     }
    84. 

    85. 

  85.     function changeAttr() {
    86. 

  86.         var form = document.forms[0],
    87. 

  87.             bg1 = form.bg1.value,
    88. 

  88.             bg2 = form.bg2.value,
    89. 

  89.             bg3 = form.bg3.value,
    90. 

  90.             color1 = form.color1.value,
    91. 

  91.             color2 = form.color2.value,
    92. 

  92.             color3 = form.color3.value;
    93. 

    94. 

  94.         // cookie 保存背景
    95. 

  95.         setCookie('bg1', bg1);
    96. 

  96.         setCookie('bg2', bg2);
    97. 

  97.         setCookie('bg3', bg3);
    98. 

    99. 

  99.         // cookie 保存字体颜色
    100. 

  100.         setCookie('color1', color1);
    101. 

  101.         setCookie('color2', color2);
    102. 

  102.         setCookie('color3', color3);
    103. 

    104. 

  104.         // 修改背景和字体颜色
    105. 

  105.         document.getElementsByClassName('container')[0].style.backgroundColor = `rgb(${bg1}, ${bg2}, ${bg3})`;
    106. 

  106.         document.getElementsByClassName('text')[0].style.color = `rgb(${color1}, ${color2}, ${color3})`;
    107. 

  107.     }
    108. 

    109. 

  109.     function removeAttr() {
    110. 

  110.         // cookie 删除背景
    111. 

  111.         delCookie('bg1');
    112. 

  112.         delCookie('bg2');
    113. 

  113.         delCookie('bg3');
    114. 

    115. 

  115.         // cookie 删除字体颜色
    116. 

  116.         delCookie('color1');
    117. 

  117.         delCookie('color2');
    118. 

  118.         delCookie('color3');
    119. 

    120. 

  120.         // 页面重载
    121. 

  121.         location.reload();
    122. 

  122.     }
    123. 

    124. 

  124.     function getCookie(name) {
    125. 

  125.         var cookies = document.cookie ? document.cookie.split(';') : [];
    126. 

  126.         for (var i = 0; i < cookies.length; i++) {
    127. 

  127.             if (0 === cookies[i].trim().indexOf(name)) {
    128. 

  128.                 return cookies[i].trim().split('=')[1].trimLeft();
    129. 

  129.             }
    130. 

  130.         }
    131. 

  131.         return '';
    132. 

  132.     }
    133. 

    134. 

  134.     function setCookie(name, value, expiredays = 30) {
    135. 

  135.         var cookies = document.cookie ? document.cookie.split(';') : [], date = new Date();
    136. 

  136.         date.setTime(date.getTime() + expiredays * 24 * 60 * 60 * 1000);
    137. 

    138. 

  138.         // 修改存在的 name, expires 值
    139. 

  139.         for (var i = 0; i < cookies.length; i++) {
    140. 

  140.             if (0 === cookies[i].trim().indexOf(name)) {
    141. 

  141.                 var existName = true;
    142. 

  142.                 cookies[i] = name + '=' + value;
    143. 

  143.                 continue;
    144. 

  144.             }
    145. 

  145.             if (0 === cookies[i].trim().indexOf('expires')) {
    146. 

  146.                 var existExpires = true;
    147. 

  147.                 cookies[i] = 'expires=' + date.toUTCString();
    148. 

  148.                 continue;
    149. 

  149.             }
    150. 

  150.             if (0 === cookies[i].trim().indexOf('path')) {
    151. 

  151.                 var existPath = true;
    152. 

  152.             }
    153. 

  153.         }
    154. 

    155. 

  155.         // 添加未存在的 name, expires, path 值
    156. 

  156.         if ('undefined' === typeof existName) {
    157. 

  157.             cookies.unshift(name + '=' + value);
    158. 

  158.         }
    159. 

  159.         if ('undefined' === typeof existExpires) {
    160. 

  160.             cookies.push('expires=' + date.toUTCString());
    161. 

  161.         }
    162. 

  162.         if ('undefined' === typeof existPath) {
    163. 

  163.             cookies.push('path=/');
    164. 

  164.         }
    165. 

    166. 

  166.         // 设置 cookie
    167. 

  167.         document.cookie = cookies.join(';');
    168. 

  168.     }
    169. 

    170. 

  170.     function delCookie(name) {
    171. 

  171.         var cookies = document.cookie ? document.cookie.split(';') : [], date = new Date();
    172. 

  172.         date.setTime(date.getTime() - 1);
    173. 

    174. 

  174.         // 删除存在的 name 值，修改 expires 值
    175. 

  175.         for (var i = 0; i < cookies.length; i++) {
    176. 

  176.             if (0 === cookies[i].trim().indexOf(name)) {
    177. 

  177.                 cookies.splice(i, 1);
    178. 

  178.             }
    179. 

  179.             if (0 === cookies[i].trim().indexOf('expires')) {
    180. 

  180.                 var existExpires = true;
    181. 

  181.                 cookies[i] = 'expires=' + date.toUTCString();
    182. 

  182.             }
    183. 

  183.             if (0 === cookies[i].trim().indexOf('path')) {
    184. 

  184.                 var existPath = true;
    185. 

  185.             }
    186. 

  186.         }
    187. 

    188. 

  188.         // 如果未存在 expires, path 值
    189. 

  189.         if ('undefined' === typeof existExpires) {
    190. 

  190.             cookies.push('expires=' + date.toUTCString());
    191. 

  191.         }
    192. 

  192.         if ('undefined' === typeof existPath) {
    193. 

  193.             cookies.push('path=/');
    194. 

  194.         }
    195. 

    196. 

  196.         // 设置 cookie
    197. 

  197.         document.cookie = cookies.join(';');
    198. 

  198.     }
    199. 

  199. </script>
    200. 

    201. 

  201. </body>
    202. 

  202. </html>
    203.

cookie 保存和清除用户样式

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

cookie 保存和清除用户样式

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

上一篇： 商城实战项目

下一篇： jQuery|原生js-分别购物车全选|全不选-勾选|不勾选自动计算

推荐阅读