（六）Web Storage的使用实例——简单web留言本
生活随笔
收集整理的這篇文章主要介紹了
（六）Web Storage的使用实例——简单web留言本
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
簡單web留言本
?
通過一個簡單web留言本的示例來學(xué)習(xí)如何利用webStorage保存和讀取大量的數(shù)據(jù)。
???實(shí)現(xiàn)原理：
??? ?使用一個多行文本框來輸入數(shù)據(jù)，單擊按鈕時將文本框中的數(shù)據(jù)保存到localStorage中，在表單下部放置一個p元素里顯示保存后的數(shù)據(jù)；在保存文本框中的內(nèi)容，并不知道該內(nèi)容是什么時候?qū)懞玫?#xff0c;所以在保存該內(nèi)容的時候也要保存當(dāng)前日期和時間，并將該日期和時間一并顯示在p元素中。因?yàn)樵倮脀ebStorage保存數(shù)據(jù)時，數(shù)據(jù)必須是“鍵名/鍵值”格式，所以將日期作為鍵名，文本框中的內(nèi)容作為鍵值（計(jì)算機(jī)中的時間按是以時間戳【1970-1-1凌晨12點(diǎn)后經(jīng)過的秒數(shù)】的形式來進(jìn)行管理的，送一保存是不可能出現(xiàn)重復(fù)的鍵名）。單擊追加按鈕來保存數(shù)據(jù)；單擊初始化按鈕來消除全部數(shù)據(jù)。
?
具體實(shí)現(xiàn)：
messageBoard.html
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>簡單web留言本</title><script type="text/javascript" src="script2.js"></script> </head> <body><h1>簡單web留言本</h1><textarea id="memo" cols="60" rows="10"></textarea><br/><input type="button" value="追加" οnclick="saveStorage('memo');"><input type="button" value="初始化" οnclick="clearStorage('msg');"><hr><p id="msg"></p> </body> </html>
?
script2.js
//用于保存數(shù)據(jù) function saveStorage(id){var data = document.getElementById(id).value;var time = new Date().getTime();//獲得當(dāng)前日期和時間的時間戳localStorage.setItem(time,data);alert("數(shù)據(jù)已保存。")loadStorage('msg'); } //用于取得保存后的所有數(shù)據(jù)，然后以表格的形式顯示 function loadStorage(id){var result = '<table border="1">';for(var i = 0;i < localStorage.length;i++){ //localStorage.length所有保存在localStorage中的數(shù)據(jù)條數(shù)var key = localStorage.key(i); //得到localStorage中與相應(yīng)索引號對應(yīng)的數(shù)據(jù)var value = localStorage.getItem(key);var date = new Date();date.setTime(key);var datestr = date.toGMTString();result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';}result += '</table>';var target = document.getElementById(id);target.innerHTML = result; } //將localStorage中保存的數(shù)據(jù)全部清除 function clearStorage(){localStorage.clear();alert("全部數(shù)據(jù)被清除。");loadStorage('msg'); }運(yùn)行結(jié)果：
總結(jié)
以上是生活随笔為你收集整理的（六）Web Storage的使用实例——简单web留言本的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （五）HTML5本地存储——Web St
- 下一篇： （八）webStorage使用实例——利