HTML5+CSS3-充实笔记0628

HappyAndy_Lo

304

收藏 2019-06-28

续前一天的示例

      function loadAll(){
         var list = document.getElementById("list");
         if(localStorage.length>0){
               var result = "<ul>";
               for(var i=0; i<localStorage.length; i++){
                  var title = localStorage.key(i);
                  result += "<li>"+title+"</li>";
               }
               result += "</ul>";
               list.innerHTML = result;
         }else{
               list.innerHTML = "still not write Diary? do it now!";
         }
      }
   </script>
</head>
<body>
<div>
   <hgroup style="margin-bottom: 10px">
      <label>Title:</label>
      <input type="text" name="txtTitle" id="txtTitle" />
   </hgroup>
   <hgroup style="margin-bottom: 10px">
      <label>Content:</label>
      <textarea id="txtContent" rows="15" cols="50"></textarea>
   </hgroup>
   <input type="button" value="New Add" />
   <hr />
   <label for="search">Title:</label>
   <input type="text" name="searchTitle" id="searchTitle" />
   <input type="button" value="search" />
   <p id="searchContent" ><br /></p>
</div>
<br />
<div id="list" />

</body>
</html>

使用Web Storage

检测浏览器支持： if(window.sessionStorage) { ....}

保存JSON格式的数据：
var userInfo = {

name: "张三",
age:"24",
email:"sanz@163.com"
};

localStorage.setItem("userInfo", JSON.stringify(userInfo)
读取的时候也有不同：
var newUserInfo = JSON.parse(localStorage.getItem("userInfo"));
var name = newUserInfo.name;
var age=newUserInfo.age;
var email = newUserInfo.email;

清除数据：可以通过浏览器删除，也可以通过removeItem(key)或clear()方法清除
遍历操作：前面示例中，使用localStorage.length属性获取当前浏览器本地数据的所有数目，然后通过for遍历这些数据

Storage事件：当web storage发生变化时触发，可以监视不同页面对storage的修改

几个比较实用的属性：key /oldValue / newValue / url（触发页面改动的URL地址）