（六）Web Storage的使用实例——简单web留言本

简单web留言本

 

通过一个简单web留言本的示例来学习如何利用webStorage保存和读取大量的数据。

   实现原理：

     使用一个多行文本框来输入数据，单击按钮时将文本框中的数据保存到localStorage中，在表单下部放置一个p元素里显示保存后的数据；在保存文本框中的内容，并不知道该内容是什么时候写好的，所以在保存该内容的时候也要保存当前日期和时间，并将该日期和时间一并显示在p元素中。因为再利用webStorage保存数据时，数据必须是“键名/键值”格式，所以将日期作为键名，文本框中的内容作为键值（计算机中的时间按是以时间戳【1970-1-1凌晨12点后经过的秒数】的形式来进行管理的，送一保存是不可能出现重复的键名）。单击追加按钮来保存数据；单击初始化按钮来消除全部数据。

 

具体实现：

messageBoard.html

    
    
    


    
简单web留言本
    

    
    
    

    

 

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 = '';
    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 += '';
    }
    result += '
' + value + '
' + datestr + '
';
    var target = document.getElementById(id);
    target.innerHTML = result;
}

//将localStorage中保存的数据全部清除
function clearStorage(){
    localStorage.clear();
    alert("全部数据被清除。");
    loadStorage('msg');
}

运行结果：