localstroage的保存用户设置
16lz
2021-11-24
修改背景颜色和字号 并存入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>
更多相关文章
- localStorage使用
- 带有二级分类的导航
- Element Plus组件-按钮、图标、ColorPicker 颜色选择器、日历、R
- Elasticsearch 5.0.0集群安装
- 用户添加,修改,删除
- Java 中的屠龙之术:如何修改语法树?
- 用户信息添加、修改、删除
- PHP mysql 新增时存在则修改,不存在则新增,
- Java Agent 动态修改字节码详情