<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>通过localStorage保存应用程序当中用户的设置</title>
<style>
*{
font-family: "微软雅黑";
}
#main{
margin: 50px;
border: 1px solid gray;
width: 450px;
height: 300px;
padding: 20px;
-webkit-box-shadow:8px 8px 10px black;
-moz-box-shadow: 8px 8px 10px black;
}
.but{
width: 80px;
padding: 5px;
background: orange;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
font-size: 18px;
}
.but:hover{
cursor: pointer;
}
#content{
width: 400px;
word-spacing: 8px;
text-indent: 35px;
font-size: 18px;
}
</style>
<script>
window.onload=function(){
//首先要读取字体
var fontSize=localStorage.getItem("fontSize");
if(fontSize!=null){
$("content").style.fontSize=fontSize;
}
}
function setBigFont(){
setFont("20px");
}
function setMidFont(){
setFont("18px");
}
function setMinFont(){
setFont("16px");
}
function setFont(fontSize){
if(localStorage.getItem("fontSize")!=null){
localStorage.removeItem("fontSize");
}
localStorage.setItem("fontSize",fontSize);
$("content").style.fontSize=fontSize;
}
function $(str){
return document.getElementByIdx_x(str);
}
</script>
</head>
<body>
<div id="main">
<h3>通过localStorage保存应用程序当中保存用户的设置</h3>
<div>
<span>请选择您要使用的字体</span>
<button class="but" onclick="setBigFont();">大</button>
<button class="but" onclick="setMidFont()">中</button>
<button class="but" onclick="setMinFont();">小</button>
</div>
<br>
<div id="content">
微软宣布将在4月1日发布 Win8 嵌入式系统的标准版和专业版。
微软还指出，Win8 嵌入式系统的企业定制版可能要在7月才开始推出。
Windows 嵌入式系统被应用于各种类型的设备上，提供系统的控制能力。
此次 Win8 嵌入式系统的目标市场非常可能是物联网领域。
</div>
</div>
</body>
</html>
本文介绍了一种利用HTML5的localStorage特性来保存用户字体大小设置的方法，并提供了完整的代码实现。通过简单的按钮操作即可更改并持久化页面内容的字体大小。
扫一扫
1779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
