[学习笔记] HTML5+CSS3-充实笔记0628 [推广有奖]

51关注
7粉丝

已卖：1067份资源

大师

26%

还不是VIP/贵宾

威望: 1 级
论坛币: 83587 个
通用积分: 13674.5844
学术水平: 673 点
热心指数: 828 点
信用等级: 739 点
经验: 425351 点
帖子: 17339
精华: 0
在线时间: 3600 小时
注册时间: 2016-7-9
最后登录: 2025-12-9

楼主

HappyAndy_Lo 发表于 2019-6-28 08:41:46 |AI写论文

是否 +2 论坛币

k人参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

续前一天的示例

      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地址）