WebStorage简易Web留言板

原创 2015年07月08日 00:59:22

这里以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');
}


版权声明:本文为博主原创文章,未经博主允许不得转载。

(六)Web Storage的使用实例——简单web留言本

简单web留言本
  • lmb55
  • lmb55
  • 2015年07月03日 11:31
  • 1713

使用Django开发一个简易的留言板

Django在线留言板小练习环境ubuntu16.04 + python3 + django1.111、创建项目django-admin.py startproject message进入项目mess...

yii简易留言板 AR操作数据库

Jsp简易留言板的实现:application与Arraylist应用示例

index.jsp http://www.w3.org/1999/xhtml"> index ArrayList al_say=new ArrayList...

PHP简易留言板

源码目录 index.php

HTML5本地储存实现--简易留言板

效果展示:“` 简易留言板

vue.js做简易留言板

跟着网上的视频教程做了一个简易的留言板需要的自取,新手多多包涵 用户名 年龄 用户信息表 ...

简易留言板(数据库交互)

刚开始学php自己在文本式留言板的基础上琢磨出来的。 index.php $link=mysqli_connect("localhost","root","6464","liuyan"); $sq...

element-ui+vue.js 简易留言板

留言板 ...
  • a1223f
  • a1223f
  • 2017年01月11日 15:36
  • 409

vue实现简易留言板(todolist)

vue.js入门demo,希望能够给初学者一点帮助! 为了美观考虑,代码尝试使用了bootstrap布局,适合移动端演示。 一、首先创建目录,结构一目了然。 二、布局页面样式,简单布局,贴出效果,...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebStorage简易Web留言板
举报原因:
原因补充:

(最多只允许输入30个字)