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

落日映苍穹つ 2022-08-02 00:18 171阅读 0赞

**简单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');
    }

运行结果：

![Center][]

[Center]: /images/20220731/792e202c2fee4584a0a2fe7087777e19.png