localStorage&sessionStorage.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
  7. <meta name="format-detection" content="telephone=no" />
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  10. <meta name="format-detection" content="telphone=no, email=no" />
  11. <link rel="stylesheet" href="css/mui.min.css" />
  12. <link rel="stylesheet" href="css/mui.picker.min.css" />
  13. </head>
  14. <body>
  15. <div class="mui-input-row">
  16. <input id='mydate' type="text" class="mui-text-center" placeholder="选择日期">
  17. </div>
  18. <script type="text/javascript" src="js/mui.min.js"></script>
  19. <script type="text/javascript" src="js/mui.picker.min.js"></script>
  20. <script>
  21. //浏览器物理清除缓存会清空掉localstorage
  22. /*判断浏览器是否支持该特性*/
  23. if(!window.localStorage) {
  24. alert("浏览器不支持localstorage");
  25. } else {
  26. var obj = {
  27. "a": 2,
  28. "b": 1
  29. };
  30. obj = JSON.stringify(obj); //转为JSON字符串
  31. //检查值是否存在
  32. if(localStorage.getItem("temp2") == null) {
  33. localStorage.setItem("temp2", obj); //返回{"a":1,"b":2}
  34. } else {
  35. console.log("已经有temp2了")
  36. }
  37. var edit = JSON.stringify({
  38. "a": 4,
  39. "b": 6
  40. });
  41. //改,即重新给变量赋值
  42. localStorage.setItem("temp1", edit);
  43. //删,移除存储里的值
  44. //localStorage.removeItem("temp2");
  45. //查询,存储里的值
  46. var obj1 = JSON.parse(localStorage.getItem("temp2"));
  47. //console.log(obj1);
  48. //查询所有
  49. console.log(localStorage);
  50. //删,清空所有
  51. //localStorage.clear();
  52. }
  53. //sessionStorage示例
  54. //浏览器物理清除缓存会清空掉sessionStorage
  55. if(!window.sessionStorage){
  56. alert("浏览器不支持sessionStorage");
  57. }else{
  58. //自定义json数据
  59. var obj = {
  60. a : 12,
  61. b : [1,2,3,4,5],
  62. c : {
  63. x : 'a',
  64. y : ['bb', 12, 'cc', {a:1,b:2}],
  65. z : 1333
  66. }
  67. };
  68. //json格式化插入
  69. sessionStorage.setItem('page', JSON.stringify(obj));
  70. // 读取值
  71. var page = JSON.parse(sessionStorage.getItem('page'));
  72. console.log(page);
  73. // 遍历下数组
  74. for(var i=0;i< page.b.length;i++){
  75. console.log(page.b[i]);
  76. }
  77. // 遍历对象,通常用in
  78. for(var j in page.c){
  79. console.log(page.c[j])
  80. }
  81. // 删除
  82. sessionStorage.removeItem('page');
  83. }
  84. mui('body').on('tap', '#mydate', function() {
  85. var th = this;
  86. //mui日历控件初始化
  87. var picker = new mui.DtPicker({
  88. type: "date", //设置日历初始视图模式
  89. beginDate: new Date(2016, 6, 6), //设置开始日期
  90. endDate: new Date() //设置结束日期
  91. });
  92. console.log(picker)
  93. picker.show(function(rs) {
  94. th.value = rs.text;
  95. picker.dispose();
  96. });
  97. });
  98. </script>
  99. </body>
  100. </html>