ASCII码 ASCII码

0519作业localstorage

发布于：2022-06-11 08:35:39  栏目：技术文档

使用localStorage实现用户自定义页面样式。

一、要求

1. 用户进入页面后更改一些页面样式

2. 下次重新进入会保留上次的样式设置

二、思路

1.在1.html中，输入背景颜色值、字体颜色值，通过localStorage.setItem进行保存
2.在2.html中，window.onload中通过localStorage.getItem获取对应的色值
3.将对应的color值设置到style.innerText中，并拼接显示背景颜色和字体颜色

三、源代码

  1. <!-- 1.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>1</title>
  7.     <script>
  8.         function setBgColor() {
  9.             bgColor = window.prompt("请输入背景颜色");
  10.             console.log(bgColor);
  11.             // 存储背景颜色的值到localStorage
  12.             localStorage.setItem("bgColor", bgColor);
  13.         }
  14.         function setFontColor() {
  15.             ftColor = window.prompt("请输入字体颜色");
  16.             console.log(ftColor);
  17.             // 存储字体颜色的值到localStorage
  18.             localStorage.setItem("ftColor", ftColor);
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23.     <input type="button" onclick="setBgColor();" value="背景颜色" />
  24.     <input type="button" onclick="setFontColor();" value="字体颜色" />
  25.     <a href="2.html" target="_blank">go 2.html</a>
  26. </body>
  27. </html>
  1. <!-- 2.html -->
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>2</title>
  7.     <style id="st"></style>
  8. </head>
  9. <body>
  10.     <script>
  11.         function getBgColor() {
  12.             var bgColor = localStorage.getItem("bgColor");
  13.             console.log(bgColor);
  14.             return bgColor;
  15.         }
  16.         function getFtColor() {
  17.             var ftColor = localStorage.getItem("ftColor");
  18.             console.log(ftColor);
  19.             return ftColor;
  20.         }
  21.         window.onload = function () {
  22.             var bgColor = getBgColor();
  23.             console.log(bgColor);
  24.             var ftColor = getFtColor();
  25.             console.log(ftColor);
  27.             var styleObj = document.getElementById("st");
  28.             console.log(styleObj);
  29.             styleObj.innerText = '* {background-color:' + bgColor + ';color:'+ftColor+ ';}';
  30.         }
  31.     </script>
  32.     <h1>########33</h1>
  33.     <br>
  34.     <p>ddddd</p><p>ddddd</p><p>ddddd</p><p>ddddd</p>
  35. </body>
  36. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行