HTML5 Web Storage
编程技术 / houtizong 发布于 2年前 116
体验了一下HTML5 Web Storage Good ,很方便，很实用...
在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>
上一篇：用HTML5本地数据库制作联系人
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
