HTML5应用localStorage保存数据
2015-08-06 16:10
591 查看
//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不会
<!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不会
相关文章推荐
- HTML5音频Audio
- HTML5 FileReader
- H5表单类型
- H5 localStorage
- HTML5的画布:Paths
- HTML5画布: clearRect()
- HTML5的画布:Stroke(笔触)和Fill(填充)
- HTML5画布概述
- html5 file调用一般处理程序上传图片
- 【HTML5+MVC4】xhEditor网页编辑器图片上传
- HTML5 Web 存储功能
- HTML5的fieldset标签
- HTML5实践 -- 三步实现响应式设计
- HTML5吧!少年
- HTMl5 Document.querySelectorAll
- 【Spark学习】Spark 1.1.0 with CDH5.2 安装部署
- HTML5桌面通知:notification api
- HTML5纯div饼图
- HTML5上传文件显示进度
- 玩转html5<canvas>画图