localstroage的保存用户设置
程序员文章站
2022-03-13 13:56:04
...
修改背景颜色和字号 并存入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>
上一篇： 对容器镜像的思考和讨论
下一篇： 飞舞的气泡