JS实战项目一:留言板和本地检索

    最近开始接触WEB部分的知识,重点学习js,主要做一些小东西来实践学习.css就打算跳过去了,毕竟以后不做前端,所以界面丑不要介意哈.

    主要是使用HTML5中的localStorage这一特性来实现本地存储,同样的用sessionStorage也是可以实现的,两者的不同之处是sessionStorage关闭浏览器后就自动清除,而localStorage除非手动清除,否则一直存在,具体操作用法是一样的.

一.WEB留言板

说是留言板,实际上应该是伪留言板.主要使用loadStorage来存储到本地数据,然后再查询,就相当于一个小数据库,实际上loadStorage本地存储也是以数据库形式存储的.


先来看一下界面图
JS实战项目一:留言板和本地检索_第1张图片
主要分为三部分,上面的显示部分为p标签
中间的是一个Textarea输入框
最底下是两个按钮分别是保存到 loadStorage,清除 loadStorage

Html代码

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>简单的WEB留言板</title>
    <style type="text/css"> .container,p{ width: 400px; margin: 0 auto; } </style>
    <script src="script.js"></script>
</head>
<body>
    <p id="msg"></p>
    <div class="container" >
        <textarea id="input" rows="20" cols="60"></textarea>
        <br/>
        <input type="button" value="保存" onclick="saveStorage('input')">
        <input type="button" value="清除所有" onclick="clearStorage('msg')">
    </div>
</body>
</html>

js代码

function saveStorage(id){
    var target = document.getElementById(id).value;
    //保存当前时间
    var date = new Date().getTime();
    //把当前时间设为键
    localStorage.setItem(date,target);
    alert("保存成功");
    //保存成功后显示在p标签
    loadStorage('msg')
}

function loadStorage(id){
    var target = document.getElementById(id);
    //取出的数据以表格形式显示
    var result = "<table border='1'>";
    //循环取出数据
    for(var i = 0; i < localStorage.length ;i++){
        //取出时间
        var key = localStorage.key(i);
        //设置时间
        var date = new Date();
        date.setTime(key);
        //取出数据
        var value = localStorage.getItem(key);
        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result += "</table>";
    target.innerHTML = result;
}
function clearStorage(id){
    var target = document.getElementById(id);
    //清楚localStroage
    localStorage.clear();
    alert("清除成功");
    //清除后把p标签置为空
    target.innerHTML = "";
}

二.本地检索

和上面那个例子相同,本地存储到localStroage,然后根据输入信息检索出来即可
先看图片例子
JS实战项目一:留言板和本地检索_第2张图片
主要也是三部分,上半部分存储信息后,中间保存,最下面查询


html代码

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>检索表</title>
    <style type="text/css"> .container{ width: 400px; margin: 0 auto; } </style>
    <script src="js.js" ></script>
</head>
<body>
    <div class="container">
        <table border="0">
            <tr>
                <td width="30%">姓名:</td>
                <td width="70%" ><input type="text" id="name"></td>
            </tr>
            <tr>
                <td width="30%">邮箱:</td>
                <td width="70%" ><input type="text" id="mail"></td>
            </tr>
            <tr>
                <td width="30%">电话:</td>
                <td width="70%"><input type="text" id="phone"></td>
            </tr>
            <tr>
                <td width="30%">备注:</td>
                <td width="70%"><input type="text" id="remark"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="button" value="保存" onclick="saveStorage()"></td>
            </tr>
        </table>
        <hr />
        <br/>
        检索:
        <input type="text" id="input">
        <input type="button" value="查找" onclick="loadStorage('msg')">
        <p id="msg"></p>
    </div>
</body>
</html>


js代码

/** * Created by nl101 on 2016/1/21. */
function saveStorage(){
    var data = new Object();
    //依次取出所有的数据
    data.name = document.getElementById("name").value;
    data.mail = document.getElementById("mail").value;
    data.phone = document.getElementById("phone").value;
    data.remark = document.getElementById("remark").value;
    //转换成Json类型的数据存储
    var str = JSON.stringify(data);
    //把姓名当作键来存储
    localStorage.setItem(data.name,str);
    //提示
    alert("保存成功");
}

function loadStorage(id){
    //获取查找内容
    var find = document.getElementById("input").value;
    //找到存储的该项
    var str = localStorage.getItem(find);
    //解析Json数据
    var data = JSON.parse(str);
    //打印出来即可
    var result = "姓名:" + data.name+"<br/>";
        result += "邮箱:" + data.mail+"<br/>";
        result += "手机:" + data.phone+"<br/>";
        result += "备注:" + data.remark+"<br/>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}


等待更新

你可能感兴趣的:(js,html5)