首页 > 网页设计 > html5之使用web存储

html5之使用web存储

1)使用本地存储(localStorage):

   通过全局属性localStorage访问本地存储功能,并会返回一个Storage对象,它被用来保存键/值形式的字符串对。

   Storage对象的成员:

   clear()——移除保存的键/值对;

   getItem(<key>)——取得与指定键关联的值;

   key(<index>)——取得指定索引的键;

   length——返回已保存的键/值对数量;

   removeItem(<key>)——移除指定键对应的键/值对;

   setItem(<key>,<value>)——添加一个新的键/值对,如果键已使用就更新它的值;

   [<key>]——用数组的访问形式取得与指定键关联的值;

   监听存储事件:

   某个文档对本地存储进行修改时会触发storage事件,同时指派的对象是一个StorageEvent对象,其成员有:

   key——返回发生变化的键;

   oldValue——返回关联此键的旧值;

   newValue——返回关联此键的新值;

   url——返回制造变化的文档URL;

   storageArea——返回发生变化的Storage对象;

[html]

  1. <!DOCTYPE html>  
  2. <html lang="zh-CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>上海远地资产管理有限公司</title>  
  6.     <meta name="author" content="jason"/>  
  7.     <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>  
  8.     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>  
  9.     <style type="text/css">  
  10.         body > *{  
  11.             float:left;  
  12.         }  
  13.         table{  
  14.             border-collapse: collapse;  
  15.             margin-left: 50px;  
  16.         }  
  17.         th,td{  
  18.             padding: 4px;  
  19.         }  
  20.         th{  
  21.             text-align: right;  
  22.         }  
  23.         input{  
  24.             border:thin solid black;  
  25.             padding: 2px;  
  26.         }  
  27.         label{  
  28.             min-width: 50px;  
  29.             display: inline-block;  
  30.             text-align: right;  
  31.         }  
  32.         #countmsg,#buttons{  
  33.             margin-left: 50px;  
  34.             margin-top:5px;  
  35.             margin-bottom: 5px;  
  36.         }  
  37.     </style>  
  38. </head>  
  39. <body>  
  40. <div>  
  41.     <div>  
  42.         <label>Key:</label>  
  43.         <input id="key" placeholder="Enter Key">  
  44.     </div>  
  45.     <div>  
  46.         <label>Value:</label>  
  47.         <input id="value" placeholder="Enter Value">  
  48.     </div>  
  49.     <div id="buttons">  
  50.         <button id="add">Add</button>  
  51.         <button id="clear">Clear</button>  
  52.     </div>  
  53.     <p id="countmsg">There are <span id="count"></span> items</p>  
  54. </div>  
  55. <table id="data" border="1">  
  56.     <tr>  
  57.         <th>Item Count:</th><td>-</td>  
  58.     </tr>  
  59. </table>  
  60. <script>  
  61.     displayData();  
  62.     var buttons=document.getElementsByTagName("button");  
  63.     for(var i=0;i<buttons.length;i++){  
  64.         buttons[i].onclick=handleButtonPress;  
  65.     }  
  66.     function handleButtonPress(e){  
  67.         switch(e.target.id){  
  68.             case 'add':  
  69.             var key=document.getElementById("key").value;  
  70.             var value=document.getElementById("value").value;  
  71.                 localStorage.setItem(key,value);  
  72.                 break;  
  73.             case 'clear':  
  74.                 localStorage.clear();  
  75.                 break;  
  76.         }  
  77.         displayData();  
  78.     }  
  79.     function displayData(){  
  80.         var tableElem=document.getElementById("data");  
  81.         tableElem.innerHTML="";  
  82.         var itemCount=localStorage.length;  
  83.         document.getElementById("count").innerHTML=itemCount;  
  84.         for(var i=0;i<itemCount;i++){  
  85.             var key=localStorage.key(i);  
  86.             var val=localStorage[key];  
  87.             tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";  
  88.         }  
  89.     }  
  90. </script>  
  91. </body>  
  92. </html>  
[html]

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         table{  
  8.             border-collapse: collapse;  
  9.             margin-left: 50px;  
  10.         }  
  11.         th,td{  
  12.             padding: 4px;  
  13.         }  
  14.     </style>  
  15. </head>  
  16. <body>  
  17. <table id="data" border="1">  
  18.     <tr>  
  19.         <th>key</th>  
  20.         <th>oldValue</th>  
  21.         <th>newValue</th>  
  22.         <th>url</th>  
  23.         <th>storageArea</th>  
  24.     </tr>  
  25. </table>  
  26. <script>  
  27.     var tableElem=document.getElementById("data");  
  28.     window.onstorage=handleStorage;  
  29.     function handleStorage(e){  
  30.         var row="<tr>";  
  31.         row+="<td>"+ e.key+"</td>";  
  32.         row+="<td>"+ e.oldValue+"</td>";  
  33.         row+="<td>"+ e.newValue+"</td>";  
  34.         row+="<td>"+ e.url+"</td>";  
  35.         row+="<td>"+ (e.storageArea == localStorage)+"</td></tr>";  
  36.         tableElem.innerHTML+=row;  
  37.     }  
  38.   
  39. </script>  
  40. </body>  
  41. </html>  

2)使用会话存储(sessionStorage)

   会话存储的工作方式和本地存储很接近,不同之处在于数据是各个浏览器上下文私有的,会在文档关闭时移除。 

[html]

  1. <!DOCTYPE html>  
  2. <html lang="zh-CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>上海远地资产管理有限公司</title>  
  6.     <meta name="author" content="jason"/>  
  7.     <meta name="description" content="上海远地资产管理有限公司(简称:远地资产),是一家专业的互联网金融服务平台."/>  
  8.     <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>  
  9.     <style type="text/css">  
  10.         body > *{  
  11.             float:left;  
  12.         }  
  13.         table{  
  14.             border-collapse: collapse;  
  15.             margin-left: 50px;  
  16.         }  
  17.         th,td{  
  18.             padding: 4px;  
  19.         }  
  20.         th{  
  21.             text-align: right;  
  22.         }  
  23.         input{  
  24.             border:thin solid black;  
  25.             padding: 2px;  
  26.         }  
  27.         label{  
  28.             min-width: 50px;  
  29.             display: inline-block;  
  30.             text-align: right;  
  31.         }  
  32.         #countmsg,#buttons {  
  33.             margin-left: 50px;  
  34.             margin-top: 5px;  
  35.             margin-bottom: 5px;  
  36.         }  
  37.     </style>  
  38. </head>  
  39. <body>  
  40. <div>  
  41.     <div>  
  42.         <label>Key:</label>  
  43.         <input id="key" placeholder="Enter Key">  
  44.     </div>  
  45.     <div>  
  46.         <label>Value:</label>  
  47.         <input id="value" placeholder="Enter Value">  
  48.     </div>  
  49.     <div id="buttons">  
  50.         <button id="add">Add</button>  
  51.         <button id="clear">Clear</button>  
  52.     </div>  
  53.     <p id="countmsg">There are <span id="count"></span> items</p>  
  54. </div>  
  55. <table id="data" border="1">  
  56.     <tr>  
  57.         <th>Item Count:</th><td>-</td>  
  58.     </tr>  
  59. </table>  
  60. <script>  
  61.     displayData();  
  62.     var buttons=document.getElementsByTagName("button");  
  63.     for(var i=0;i<buttons.length;i++){  
  64.         buttons[i].onclick=handleButtonPress;  
  65.     }  
  66.     function handleButtonPress(e){  
  67.         switch(e.target.id){  
  68.             case 'add':  
  69.             var key=document.getElementById("key").value;  
  70.             var value=document.getElementById("value").value;  
  71.                 sessionStorage.setItem(key,value);  
  72.                 break;  
  73.             case 'clear':  
  74.                 sessionStorage.clear();  
  75.                 break;  
  76.         }  
  77.         displayData();  
  78.     }  
  79.     function displayData(){  
  80.         var tableElem=document.getElementById("data");  
  81.         tableElem.innerHTML="";  
  82.         var itemCount=sessionStorage.length;  
  83.         document.getElementById("count").innerHTML=itemCount;  
  84.         for(var i=0;i<itemCount;i++){  
  85.             var key=sessionStorage.key(i);  
  86.             var val=sessionStorage[key];  
  87.             tableElem.innerHTML+="<tr><th>"+key+":</th><td>"+val+"</td></tr>";  
  88.         }  
  89.     }  
  90. </script>  
  91. </body>  
  92. </html>  

本文固定链接: http://www.devba.com/index.php/archives/6300.html | 开发吧

报歉!评论已关闭.