利用html5的localStorage做一个备忘录
Posted fairytingle
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了利用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>
js
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做一个备忘录的主要内容，如果未能解决你的问题，请参考以下文章
利用localStorage事件来跨标签页共享sessionStorage
HTML5WebSQLDatabase与localStorage用途？
localstorage sessionstorage cookie 备忘
html5 的localstorage与sessionstroge