您的位置：首页 > 数据库

（七）webStorage使用实例——webStorage作为简易数据库来使用

2015-07-03 12:24 423 查看
webStorage作为简易数据库来使用



如果想用webStorage作为数据库，首先要考虑以下问题：

1、在数据库中，大多数表都分为几列，怎样对列进行管理？

2、怎样对数据库进行检索？



实现原理：（客户联系信息管理网页）

客户联系信息分为姓名、Email、电话号码、备注这几列，保存在localStorage中。如果输入客户的姓名并且进行检索可以获取该客户的所有信息；首先，保存数据时将客户的姓名作为键名来保存，这样在获取客户其他信息是会比较方便；然后，怎样将客户联系信息分几列来进行保存呢？要做到这一点，需要使用JSON格式。将对象以JSON格式作为文本来保存，获取该对象时再通过JSON格式来进行获取，就可以在webStorage中保存和读取具有复杂结构的数据了。【JSON格式是javascript Object Notation的缩写，是将javascript中的对象作为文本形式来保存时所使用的一种格式】。

实现代码：



database.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>简易数据库示例</title>
    <script type="text/javascript" src="script3.js"></script>
</head>
<body>
    <h1>使用webStorage来做简易数据库示例</h1>
    <table>
        <tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
        <tr><td>Email:</td><td><input type="text" id="email"></td></tr>
        <tr><td>电话号码：</td><td><input type="text" id="tel"></td></tr>
        <tr><td>备注：</td><td><input type="text" id="memo"></td></tr>
        <tr>
            <td></td>
            <td><input type="button" value="保存" onclick="saveStorage();"></td>
        </tr>
    </table>
    <hr>
    <p>检索：<input type="text" id="find">
            <input type="button" value="检索" onclick="findStorage('msg');">
    </p>
    <p id="msg"></p>
</body>
</html>


script3.js

//用于保存数据
function saveStorage(){
    //saveStorage函数的处理流程
    //1、从个输入文本框中获取数据
    //2、创建对象，将获取的数据作为对象的属性进行保存
    //3、将对象转换成JSON格式的文本框
    //4、将文本数据保存到localStorage中
    var data = new Object;
    data.name = document.getElementById('name').value;
    data.email = document.getElementById('email').value;
    data.tel = document.getElementById('tel').value;
    data.memo = document.getElementById('memo').value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name,str);
    alert("数据已保存。");
}
//用于检索数据
function findStorage(id){
    //findStorage函数的处理流程
    //1、在localStorage中，将检索用的姓名作为键值，获取对应的数据
    //2、将获取的数据转换成JSON对象
    //3、取得JSON对象的各个属性值，创建要输出的内容
    //4、在页面上输出内容
    var find = document.getElementById('find').value;
    var str = localStorage.getItem(find);
    var data = JSON.parse(str);
    var result = "姓名：" + data.name + '<br>';
    result +="Email:" + data.email + '<br>';
    result +="电话号码：" +data.tel + '<br>';
    result +="备注：" + data.memo + '<br>';
    var target = document.getElementById(id);
    target.innerHTML = result;
}

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航