WebStorage当做简单数据库

原创 2015年07月10日 17:41:47
<span style="font-family: Arial, Helvetica, sans-serif;">H5代码</span>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>
<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html></span>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="appWeb3.js"></script>
</head>
<body>
    <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>


JS代码

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


function saveStorage(){
    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){
    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 += "tel:"+data.tel+"<br/>"
    result += "memo:"+data.memo+"<br/>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}


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

使用WEBStorage+JSON做简易数据库

contentTitle                     使用WEBStorage+JSON做简易数据库                                 ...

(七)webStorage使用实例——webStorage作为简易数据库来使用

webStorage作为简易数据库来使用
  • lmb55
  • lmb55
  • 2015年07月03日 12:24
  • 1564

华硕网络存储-WebStorage-2.1.28.8

  • 2015年01月06日 11:42
  • 10.23MB
  • 下载

WebStorage示例——记住密码

通常用户在登录一个网站时,浏览器都会提示“是否记住密码?”,如果选择记住密码,下次再从同一个浏览器登录该网站时,便不再需要用户再次输入用户名和密码,而是这些信息已经显示在了输入框内,用户只需要点击“登...

HTML5项目笔记7:使用HTML5 WebStorage API构建与.NET对应的会话机制

http://www.cnblogs.com/wzh2010/archive/2012/05/24/2517212.html 非常好的前辈 HTML5项目笔记7:使用HTML5 WebSt...
  • hongtaq
  • hongtaq
  • 2012年07月26日 10:21
  • 287

关于cookie和webstorage

Cookies Cookie是由服务器端生成,发送给User-Agent(一般是浏览器),浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie...

html5 webStorage:localStorage sessionStorage

localStorage sessionStorage的使用: sessionStorage使用方法完全同localStorage一致: if(typeof(Storage)!=="undefined...

[Html 5] WebStorage - localStorage和sessionStorage 基本使用方法

前言 ※2014-07-15更新文章說明sessionStorage   最近案子需要用到Html 5的localStorage加快開發速度,所以研究了一下基本使用方法   ...

使用HTML5 WebStorage API构建与.NET对应的会话机制

HTML5的Web Storage API,我们也称为DOMStarage API,用于在Web请求之间持久化数据。在Web Starage API 出现之前,我们都是将客户端和服务端之间的交互数据存...

WebSocket/WebWorker/WebStorage(HTML5的一些新特性)

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。 现很多网站为了实现即时通讯,所用的技术...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WebStorage当做简单数据库
举报原因:
原因补充:

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