one.html页面代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>这是第一个页面 one.html</title></head><body><script>function setBgColor() {color=window.prompt("请输入背景颜色");localStorage.setItem('bgcolor', color, 3); //字体颜色保存数据}function setFontColor(color) {color=window.prompt("请输入字体颜色");localStorage.setItem('fontcolor', color, 3); //字体颜色保存数据}</script><input type="button" onclick="setBgColor('red')" value="设置背景色"><input type="button" onclick="setFontColor('yellow')" value="设置字体色"><a href="two.html">点击第二个页面样式</a></body></html>
运行结果如下：
one.html页面代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>这是第二个页面 two.html</title><style id="st"></style></head><body><script>window.onload=function(){var bgcolor= localStorage.getItem('bgcolor'); //设置背景颜色读取数据var fontcolor = localStorage.getItem('fontcolor'); //设置字体颜色读取数据var stobj = document.getElementById('st');console.log(bgcolor);stobj.innerText=' * {background-color:'+bgcolor+';color:'+fontcolor+';}';}</script><h1 align="center" style="margin: 30px;">第二个页面样式</h1><br><p align="center" style="font-size: 24px;">关闭浏览器当前页面，下次重新进入会保留上次的样式设置</p></body></html>
运行结果如下：
相关推荐
