//HTML5应用localStorage保存数据到客户端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="">
<script src=""></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
ol,li{list-style:none; margin:0; padding:0;}
#colors{width:200px; height:auto; margin-bottom:10px;}
</style>
</head>
<body>
<div class="div_1">
<form action="" method="post" id="preferences">
<fieldset id="colors">
<legend>配色样式</legend>
<ol>
<li>
<label for="background_color">背景颜色：</label>
<input type="color" name="background_color" id="background_color" />
</li>
<li>
<label for="text_color">文本颜色：</label>
<input type="color" name="text_color" id="text_color" />
</li>
</ol>
</fieldset>
<input type="submit" value="保存" />
</form>
</div><!--div_1-->
<script>
//从localStorage取配色方案
var load_settings = function(){
var bgcolor = localStorage.getItem("background_color");
var text_color = localStorage.getItem("text_color");
$('#background_color').val(bgcolor);
$('#text_color').val(text_color);
preferences_to_page();
};
//把配色方案应用到页面
var preferences_to_page = function(){
$('#colors').css("background-color",$('#background_color').val());
$('body').css("color",$('#text_color').val());
};
//保存配色方案到localStorage
var save_settings = function(){
localStorage.setItem("background_color",$('#background_color').val());
localStorage.setItem("text_color",$('#text_color').val());
preferences_to_page();
};
load_settings();
$('form#preferences').submit(function(event){
event.preventDefault();
save_settings();
});
</script>
</body>
</html>
另：sessionStorage的工作方式和localStorage一样，不同的是sessionStorage保存的内容在浏览器会话结束时即消除干净，而localStorage不会
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
