（六）Web Storage的使用实例——简单web留言本
生活随笔
收集整理的這篇文章主要介紹了
（六）Web Storage的使用实例——简单web留言本
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡單web留言本
?
通過一個簡單web留言本的示例來學習如何利用webStorage保存和讀取大量的數據。
???實現原理：
??? ?使用一個多行文本框來輸入數據，單擊按鈕時將文本框中的數據保存到localStorage中，在表單下部放置一個p元素里顯示保存后的數據；在保存文本框中的內容，并不知道該內容是什么時候寫好的，所以在保存該內容的時候也要保存當前日期和時間，并將該日期和時間一并顯示在p元素中。因為再利用webStorage保存數據時，數據必須是“鍵名/鍵值”格式，所以將日期作為鍵名，文本框中的內容作為鍵值（計算機中的時間按是以時間戳【1970-1-1凌晨12點后經過的秒數】的形式來進行管理的，送一保存是不可能出現重復的鍵名）。單擊追加按鈕來保存數據；單擊初始化按鈕來消除全部數據。
?
具體實現：
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
//用于保存數據 function saveStorage(id){var data = document.getElementById(id).value;var time = new Date().getTime();//獲得當前日期和時間的時間戳localStorage.setItem(time,data);alert("數據已保存。")loadStorage('msg'); } //用于取得保存后的所有數據，然后以表格的形式顯示 function loadStorage(id){var result = '<table border="1">';for(var i = 0;i < localStorage.length;i++){ //localStorage.length所有保存在localStorage中的數據條數var key = localStorage.key(i); //得到localStorage中與相應索引號對應的數據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中保存的數據全部清除 function clearStorage(){localStorage.clear();alert("全部數據被清除。");loadStorage('msg'); }運行結果：
總結
以上是生活随笔為你收集整理的（六）Web Storage的使用实例——简单web留言本的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： （五）HTML5本地存储——Web St
- 下一篇： （七）webStorage使用实例——w