HTML5应用localStorage保存数据

来源：互联网发布：php bin2hex 编辑：程序博客网时间：2024/05/16 05:46

//HTML5应用localStorage保存数据到客户端

<!DOCTYPE html>

<html>

<head>

<style>

ol,li{list-style:none; margin:0; padding:0;}

#colors{width:200px; height:auto; margin-bottom:10px;}

</style>

</head>

<body>

<ol>

<li>

</li>

<li>

</li>

</ol>

</fieldset>

</form>

</div>

//从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不会

0 0