使用localStorage实现的改变页面样式

利用浏览器本地存储localStorage进行改变页面背景、字体颜色样式

1、用户进入页面设置样式颜色

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>

运行结果如下：

2、点击第二个页面跳转到two.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>

运行结果如下：

利用浏览器本地存储localStorage进行改变页面背景、字体颜色样式

1、用户进入页面设置样式颜色

2、点击第二个页面跳转到two.html页面

更多相关文章

随机推荐