ClayGuitar的专栏

一点一滴进步,一步一个脚印

WebStorage简易Web留言板

这里以localStorage为例

<!--HTML5代码-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="appWeb2.js"></script>//引入javaScript文件
</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('msg')">
</body>
</html>

/**
 * Created by chenglei on 15/7/8.
 */


//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++){
        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();
    alert("数据已经删除");
    loadStorage('msg');
}


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/chenglei9128/article/details/46797833
个人分类: html5
上一篇WebStorage概述
下一篇关于CoreData和SQLite多线程访问时的线程安全问题
想对作者说点什么? 我来说一句

Web动态留言板的实现

2015年04月15日 1.69MB 下载

javaweb留言板

2013年12月18日 15KB 下载

没有更多推荐了,返回首页

关闭
关闭