Blogger Information
Blog 12
fans 0
comment 0
visits 10279
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
localstorage的使用
世界上最好的语言是PHP
Original
689 people have browsed it

使用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>
Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post