Html5学习之旅-html5的留言记事本开发（17）

最新推荐文章于 2022-10-26 14:58:15 发布

fesng

最新推荐文章于 2022-10-26 14:58:15 发布

阅读量1.9k

点赞数

分类专栏： html5 文章标签： html5 html web

本文链接：https://blog.csdn.net/lpjishu/article/details/48677333

版权

html5 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

web留言记事本的开发

！！！！！代码如下

index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script>
</head>
<body>
    <p id="msg"></p>
    <textarea id="memo" cols="60" rows="10"></textarea><br/>
    <input type="button" value="追加数据" onclick="saveStorage('memo')">
    <input type="button" value="删除数据" onclick="clearStorage()">
</body>
</html>

js的代码

function saveStorage(id){
    var data = document.getElementById(id).value;
    var time = new Date().getTime();
    localStorage.setItem(time,data);
    loadStorage('msg');
}
function loadStorage(id){
    var result = "<table border = '1'>";
    for(var i = 0;i < loadStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result += "</table>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}
function clearStorage(){
    localStorage.clear();
    loadStorage('msg');
}

！！！！效果图

这里写图片描述

fesng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Html5学习之旅-html5的留言记事本开发（17）

web留言记事本的开发！！！！！代码如下index.html的代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>H5表格提交</title> <script src="appWeb.js"></script></head><body> <p id="msg"></p>
复制链接

扫一扫