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

最新推荐文章于 2024-06-15 17:55:19 发布

May的博客

最新推荐文章于 2024-06-15 17:55:19 发布

阅读量3.5k

点赞数 2

分类专栏： Web前端大话HTML 文章标签： html5 webStorage

本文链接：https://blog.csdn.net/lmb55/article/details/46739673

版权

Web前端同时被 2 个专栏收录

39 篇文章 1 订阅

订阅专栏

大话HTML

11 篇文章 7 订阅

订阅专栏

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

运行结果：

May的博客

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
（六）Web Storage的使用实例——简单web留言本

简单web留言本
复制链接

扫一扫

专栏目录