localstroage的保存用户设置

修改背景颜色和字号并存入localstroage, 打开页面首先读取localstroage保存的数据,如果没有就读默认值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .word {
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="word">hello world</div>
    <button id="bg">修改背景颜色</button>
    <button id="size">修改字号</button>
</div>
<script>
    var wordObj = document.querySelector('.word')
    var bgColor = localStorage.getItem('bgColor') || '#fe3212';
    var fontSize = localStorage.getItem('fontSize') || '20px';
    wordObj.style.background = bgColor;
    wordObj.style.fontSize = fontSize;
    document.querySelector('#bg').onclick = function () {
        bgColor = prompt('请输入要修改的颜色');
        localStorage.setItem('bgColor', bgColor);
        wordObj.style.background = bgColor;
    }
    document.querySelector('#size').onclick = function () {
        fontSize = parseInt(prompt('请输入要修改的字体大小')) + 'px';
        localStorage.setItem('fontSize', fontSize);
        wordObj.style.fontSize = fontSize;
    }
</script>
</body>
</html>

相关文章