time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > html5指南--5.使用web storage

html5指南--5.使用web storage

时间:2012-09-12 00:12 点击:1046次 字体:[ ]




   本节课的内容是介绍web storage,使用它在浏览器里存储键值对的数据,功能上像以前的cookie一样,不过他更好,存储的数据可以更大。有两种类型的web storage:local storage和session storage,他们使用相同的实现机制,只是可见性和生命周期不同。

  1.使用local storage

  我们使用localStorage对象来访问local storage,他返回Storage对象,Storage用来存储键值对的数据,他有下面一些属性和方法:

clear():清楚存储的键值对数据;

getItem(<key>):通过key获取value值;

key(<index>):通过索引获取key值;

length:返回键值对的个数;

removeItem(<key>):通过key移出指定数据;

setItem(<key>,<value>):添加一个键值对,当指定key的键值对存在,则实现更新操作;

[<key>]:通过数组下标的方式,使用key获取指定value值。

  

  Storage对象允许我们存储key和value都是字符串形式的键值对数据,key是唯一的,意味着当我们使用setItem方法添加键值对时,如果key值已经存在的话,将实现更新的操作。我们来看下面的例子:

 

  1. <!DOCTYPE HTML> 
  2. <html> 
  3. <head> 
  4.     <title>Example</title> 
  5.     <style> 
  6.         body > *{float: left;} 
  7.         table{border-collapse: collapse;margin-left: 50px;} 
  8.         th, td{padding: 4px;} 
  9.         th{text-align: right;} 
  10.         input{border: thin solid black;padding: 2px;} 
  11.         label{min-width: 50px;display: inline-block;text-align: right;} 
  12.         #countmsg, #buttons{margin-left: 50px;margin-top: 5px;margin-bottom: 5px;} 
  13.     </style> 
  14. </head> 
  15. <body> 
  16.     <div> 
  17.         <div> 
  18.             <label>Key:</label><input id="key" placeholder="Enter Key" /></div> 
  19.         <div> 
  20.             <label>Value:</label><input id="value" placeholder="Enter Value" /></div> 
  21.         <div id="buttons"> 
  22.             <button id="add">Add</button> 
  23.             <button id="clear">Clear</button> 
  24.         </div> 
  25.         <p id="countmsg">There are <span id="count"></span>items</p> 
  26.     </div> 
  27.     <table id="data" border="1"> 
  28.         <tr> 
  29.             <th>Item Count:</th> 
  30.             <td id="count">-</td> 
  31.         </tr> 
  32.     </table> 
  33.     <script> 
  34.         displayData(); 
  35.  
  36.         var buttons = document.getElementsByTagName('button'); 
  37.         for (var i = 0; i < buttons.length; i++) { 
  38.             buttons[i].onclick = handleButtonPress
  39.         } 
  40.  
  41.         function handleButtonPress(e) { 
  42.             switch (e.target.id) { 
  43.                 case 'add': 
  44.                     var key = document.getElementById('key').value; 
  45.                     var value = document.getElementById('value').value; 
  46.                     localStorage.setItem(key, value); 
  47.                     break; 
  48.                 case 'clear': 
  49.                     localStorage.clear(); 
  50.                     break; 
  51.             } 
  52.             displayData(); 
  53.         } 
  54.  
  55.         function displayData() { 
  56.             var tableElement = document.getElementById('data'); 
  57.             tableElement.innerHTML = ''
  58.             var itemCount = localStorage.length; 
  59.             document.getElementById('count').innerHTML = itemCount
  60.  
  61.             for (var i = 0; i < itemCount; i++) { 
  62.                 var key = localStorage.key(i); 
  63.                 var val = localStorage.getItem(key); 
  64.                 tableElement.innerHTML += '<tr><th>' + key + ':</th><td>' + val + '</td></tr>'; 
  65.             } 
  66.         } 
  67.     </script> 
  68. </body> 
  69. </html> 

 

  我们来看运行结果:

html5指南--5.使用web storage_www.fengfly.com

  浏览器不能删除我们通过localStorage创建的数据,除非用户删除它。




本文地址 : http://www.fengfly.com/plus/view-209211-1.html
标签: HTML5 web storage
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: