![]()
使用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>
