HTML5 Web Storage代码

最新推荐文章于 2022-11-28 00:51:27 发布

技术搬砖工

最新推荐文章于 2022-11-28 00:51:27 发布

阅读量719

点赞数

分类专栏： HTML5技术文章标签： HTML5 Web Storage

HTML5技术专栏收录该内容

2 篇文章 0 订阅

订阅专栏

HTML5 Web Storage

体验了一下HTML5

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

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

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

Web Storage 分两种：sessionStorage & localStorage

sessionStorage 随着浏览器闭关而清除

localStorage 永久保存

看例子：

      Html代码   
      
    
 <!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 ttime = 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> 

技术搬砖工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Web Storage代码

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

扫一扫