0519作业localstorage

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

一、要求

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

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

二、思路

1.在1.html中，输入背景颜色值、字体颜色值，通过localStorage.setItem进行保存

2.在2.html中，window.onload中通过localStorage.getItem获取对应的色值

3.将对应的color值设置到style.innerText中，并拼接显示背景颜色和字体颜色

三、源代码

<!-- 1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1</title>
    <script>
        function setBgColor() {
            bgColor = window.prompt("请输入背景颜色");
            console.log(bgColor);
            // 存储背景颜色的值到localStorage
            localStorage.setItem("bgColor", bgColor);
        }
        function setFontColor() {
            ftColor = window.prompt("请输入字体颜色");
            console.log(ftColor);
            // 存储字体颜色的值到localStorage
            localStorage.setItem("ftColor", ftColor);
        }
    </script>
</head>
<body>
    <input type="button" onclick="setBgColor();" value="背景颜色" />
    <input type="button" onclick="setFontColor();" value="字体颜色" />
    <a href="2.html" target="_blank">go 2.html</a>
</body>
</html>

<!-- 2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2</title>
    <style id="st"></style>
</head>
<body>
    <script>
        function getBgColor() {
            var bgColor = localStorage.getItem("bgColor");
            console.log(bgColor);
            return bgColor;
        }
        function getFtColor() {
            var ftColor = localStorage.getItem("ftColor");
            console.log(ftColor);
            return ftColor;
        }
        window.onload = function () {
            var bgColor = getBgColor();
            console.log(bgColor);
            var ftColor = getFtColor();
            console.log(ftColor);
            var styleObj = document.getElementById("st");
            console.log(styleObj);
            styleObj.innerText = '* {background-color:' + bgColor + ';color:'+ftColor+ ';}';
        }
    </script>
    <h1>########33</h1>
    <br>
    <p>ddddd</p><p>ddddd</p><p>ddddd</p><p>ddddd</p>
</body>
</html>

随机推荐

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

一、要求

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

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

二、思路

1.在1.html中，输入背景颜色值、字体颜色值，通过localStorage.setItem进行保存

2.在2.html中，window.onload中通过localStorage.getItem获取对应的色值

3.将对应的color值设置到style.innerText中，并拼接显示背景颜色和字体颜色

三、源代码

更多相关文章

随机推荐