利用html5的localStorage做一个备忘录

实现一个便签功能，可以记录内容和写的时间，当网页从新载入，可以读取以前的记录。

html文档

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>simple note</title>
 6     <script type="text/javascript"src="comment.js"></script>
 7 </head>
 8 <body>
 9     <h1>add note</h1>
10     <textarea id="content" cols="60" rows="2"></textarea><br/><!--文本输入区域-->
11     <input type="button" value="save" onclick="saveStorage('content');">
12     <input type="button" value="load" onclick="loadStorage('msg');">
13     <input type="button" value="clear" onclick="clearStorage('msg');">
14     <h1>note</h1>
15     <hr>
16     <p id="msg"></p><!--便签记录区域-->
17 </body>
18 </html>

 1 function saveStorage(id){
 2     var data = document.getElementById(id).value;//这里id为文本输入区域的content，获取了输入内容，存入data
 3     var timeNow = new Date();//获取时间
 4     localStorage.setItem(timeNow,data);//以时间作为键值
 5     localStorage.setItem(timeNow+1,timeNow);//将写便签的时间也存到localStorage
 6     loadStorage('msg');//这里的id为便签记录区域的msg,将本地储存的内容写入到id为msg的区域
 7 }
 8 function loadStorage(id){
 9     var result = '<table border = "1">';//result将包含一个记录着便签的表，将存入id为msg的便签记录区域
10     for(var i=0,j=1;i<localStorage.length;i+=2,j++)//可见，localStorage的key键值为数组，按照存入顺序，0键值为内容，1键值为时间，3键值为内容，以此类推
11     {
12         var key = localStorage.key(i);//获取内容的键值
13         var value = localStorage.getItem(key);var time = localStorage.getItem(key+1);//根据键值获取内容和时间，根据html，时间的键值比内容大1（这里说的是值，不是键值数组下标）
14         result += '<tr><td>'+j+'</td><td>'+value+'</td><td>'+time+'</td></tr>';
15     }
16     result += '</table>';//添加表结束标记
17     var target = document.getElementById(id);//利用DOM方法获取id为msg的便签记录元素，存入一个变量
18     target.innerHTML = result;//利用htmlDOM方法，将id为msg的便签记录元素的子节点内容变为result
19 }
20 function clearStorage(id){
21     localStorage.clear();//清楚本地储存
22     alert("date deleted");
23 }

利用html5的localStorage做一个备忘录

推荐阅读