您的位置：首页 > 运维架构 > Shell

shell脚本的执行方式及区别

2013-03-31 19:40 645 查看

体验了一下HTML5

在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能就是可以在客户端本地保存数据的Web Storage功能，我们知道，在HTML4中可以使用Cookies在客户端保存诸如用户名等等简单的用户信息，但是长期的实际使用下来，人发现用 Cookie储存永久数据存在以下问题：

大小：cookies的大小被限制在4K。
带宽：cookies是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。
复杂性：要正确地操纵cookie是很困难的。

在这种情况下，在HTML5中重新提供了一种在客户端本地保存数据的功能，它就是Web Storage功能。

Web Storage 分两种：sessionStorage & localStorage

sessionStorage 随着浏览器闭关而清除

localStorage 永久保存

看例子：

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Web Storage</title>
<style type="text/css">
*{font-family:Arial;}
.wrap{width:500px; margin:auto}
label{display:block; margin:10px}
table td,table th{padding:5px;}

.showData{width:300px}
.title{border:1px solid #CCC; border-bottom:0; background:#DDD;}
.contentList{border:1px solid #CCC; border-top:none}

.tip{height:30px; line-height:30px;}
.name,.tel,.age{line-height:30px; height:30px; display:inline-block; *display:inline; *zoom:1;  text-indent:5px;}
.name{width:30%;}
.tel{width:40%;}
.age{width:30%}

</style>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function tip(str, t, bb, c) {

var b = bb || true;
var time = t || 2000;
var tip = $('tip');
tip.setAttribute("class", '');
tip.style.display = 'block';
if (c) {
tip.className = c;
}

tip.innerHTML = str;
if (b) {
setTimeout(function () {
tip.className = '';
tip.style.display = 'none';
}, time);
}
}
//存储数据
function saveStoage() {
var datas = {};
datas.name = $("name").value;
datas.tel = $("tel").value;
datas.age = $("age").value;
if (!datas.name || !datas.tel || !datas.age) {
tip("内容不能为空！");
return;
}
var dataStr = JSON.stringify(datas);
localStorage.setItem(datas.name, dataStr);
showData();
tip("数据已经保存");
}
//显示数据
function showData() {
var tab = $("showData");
var str = '<div class="title"><span class="name">姓名</span><span class="tel">电话</span><span class="age">年龄</span></div>';
for (var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var data = JSON.parse(localStorage.getItem(key));
str += '<div class="contentList"><span class="name">' + key + '</span><span class="tel">' + data.tel + '</span><span class="age">' + data.age + '</span></div>';
}
tab.innerHTML = str;
$("num").innerHTML = '共有' + localStorage.length + '个联系人';
}
//清除所有数据
function clearStoage() {
if (confirm("确定要清除所有数据吗？")) {
localStorage.clear();
showData();
tip("数据消除成功！");
}
}

window.addEventListener("load", function () {
if (!localStorage) {
return;
}
showData();
$('add').addEventListener('click', saveStoage);
$("clear").addEventListener('click', clearStoage);

});
</script>
</head>
<body>
<div id="wrap" class="wrap">
<h1>WebStorage</h1>
<p id="msg"></p>
<label for="name">名称：<input type="text" name="name" id="name" value="" /></label>
<label for="tel">电话：<input type="text" name="tel" id="tel" /></label>
<label for="age">年龄：<input type="text" name="age" id="age" /></label>
<input type="button" value="添加联系人" id="add"/>
<input type="button" value="清除数据"  id="clear" />
<div id="tip" class="tip"></div>
<div id="num"></div>
<div id="showData" class="showData"></div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航