体验了一下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>
相关推荐
html web storage 别人写的，共享下
从第2 章起，分别围绕构建令人神往的富web 应用，逐一讨论了html5 的canvas、geolocation 、communication、websocket、forms、web workers、storage 等api 的使用， 辅以直观明了的客户端和服务器端示例代码，让...
适用于Angular2HTML5 WebStorage API （服务） （服务） （装饰器） （功能） 用 下载库： npm install h5webstorage --save 2.将模块和提供程序导入顶级模块： import { WebStorageModule } from "h5web...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料，Web Storage如何用JSON存储多个数据，感兴趣的小伙伴们可以参考一下
HTML5中很重要的技能之一就是：HTML5本地存储，今天就来说说这个技术，以及和其它存储方案的比较。
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
从第 2章起，分别围绕构建令人神往的富Web 应用，逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、WebWorkers、Storage等API的使用，辅以直观明了的客户端和服务器端示例代码，让开发人员...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
本书由旧金山HTML5用户组创建人联合另两位资深Web开发专家共同打造，为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新...
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB，感兴趣的朋友可以了解下
HTML5 and JavaScript Web Apps is about building web applications with HTML5 and W3C specifications that are widely supported across all devices and browsers. It is intendedfor programmers who are ...
HTML5应用开发技术
angular-html5-storage Angular.jsHTML5 Web存储（ngHTML5Storage）安装 bower install angular-html5-storage --save用法创建服务包装器（可选） app .factory('myStorageService', ['ngHTML5Storage', function(ng...