storage.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  6. <meta name="HandheldFriendly" content="true"/>
  7. <meta name="MobileOptimized" content="320"/>
  8. <title>Hello H5+</title>
  9. <script type="text/javascript" src="../js/common.js"></script>
  10. <script type="text/javascript">
  11. function setItemFun( id ) {
  12. //循环插入100调数据
  13. var dataNum = new Number(id);
  14. for ( var i=0; i<dataNum; i++ ) {
  15. plus.storage.setItem( "key"+i, "value"+i );
  16. }
  17. var length = getLengthFun();
  18. outSet( "数据存储成功,存储了"+length+"条数据;" );
  19. }
  20. function getLengthFun(){
  21. return plus.storage.getLength();
  22. }
  23. function getAllItem(){
  24. outSet( "获取数据:" );
  25. var itemLength = getLengthFun();
  26. for ( var i=0; i < itemLength; i++ ) {
  27. var key = plus.storage.key(i);
  28. var value = plus.storage.getItem(key);
  29. outLine( "key:"+key+"-->value:"+value );
  30. };
  31. }
  32. function delItem() {
  33. outSet( "删除数据:" );
  34. var itemLength = getLengthFun();
  35. for (var i=0; i < itemLength; i+=2) {
  36. var key = plus.storage.key(i);
  37. plus.storage.removeItem(key);
  38. };
  39. var itemNo = getLengthFun();
  40. outLine( "移除了"+(itemLength-itemNo)+"条数据" );
  41. }
  42. function clearAllItem(){
  43. plus.storage.clear();
  44. var num = getLengthFun();
  45. if ( num == 0 ) {
  46. outSet( "storage数据清除成功!" );
  47. }else{
  48. outSet( "storage数据清除失败!" );
  49. }
  50. }
  51. function modifyTopFive(){
  52. outSet( "修改前的数据是:" );
  53. for (var i=0; i < 5; i++) {
  54. var key = plus.storage.key(i),value = plus.storage.getItem(key);
  55. outLine( "key:"+key+"-->value:"+value );
  56. plus.storage.setItem( key, "新数据值>>"+i );
  57. };
  58. outLine( "修改后的数据是:" );
  59. for (var i=0; i < 5; i++) {
  60. var key = plus.storage.key(i),value = plus.storage.getItem(key);
  61. outLine( "key:"+key+"-->value:"+value );
  62. };
  63. }
  64. </script>
  65. <link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8"/>
  66. </head>
  67. <body>
  68. <br/>
  69. <ul class="dlist">
  70. <li class="ditem" onclick="setItemFun('11')">插入11条数据</li>
  71. <li class="ditem" onclick="getAllItem()">查询所有数据</li>
  72. <li class="ditem" onclick="modifyTopFive()">修改前五条数据的内容</li>
  73. <li class="ditem" onclick="delItem()">删除部分Item</li>
  74. <li class="ditem" onclick="clearAllItem()">清除所有内容</li>
  75. </ul>
  76. <div id="outpos"/>
  77. <div id="output">
  78. Storage管理本地数据存储,用于保存应用的全局数据,可在程序内部跨页面(跨域)共享数据。
  79. </div>
  80. </body>
  81. </html>