HTML5本地储存实现--简易数据库

虽说是简易数据库,但其实只有键值与键值对应的内容,通过将input框中的所有内容获取到JS对象中,并通过打包成JSON字符串保存在本地数据库中,实现一个键值保存多个内容

因为本地储存中,只能保存字符串不能保存变量,所以需要转化成字符串

效果预览:
HTML5本地储存实现--简易数据库_第1张图片

关键知识点:

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。

JSON.parse() 方法用于将一个 JSON 字符串转换为对象。

代码部分:


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <h1>使用web Srotage 来做简易数据库实例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>
        <script type="text/javascript">

            function saveStorage() {
                //创建一个对象,并将所有input的内容放到对象各属性中
                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;
                //将对象中所有属性和值转换成JSON字符串格式
                var str = JSON.stringify(data);
                //以data对象中的name属性作为键值,打包后JSON数据作为内容保存到本地数据库中
                localStorage.setItem(data.name,str);
                //保存成功后显示提示
                console.log("数据已保存");
            }

            function findStorage(id) {
                //获取input框中输入的值
                var find = document.getElementById('find').value;
                //将获取到的值,通过键值查找键值下的内容
                var str = localStorage.getItem(find);
                //将查询到的内容从JSON字符串转换成JS对象
                var data = JSON.parse(str);
                //将对象中所有值,依次获取出来
                var result = "姓名:" + data.name + '
'
; result += "EMAIL:" + data.email + '
'
; result += "电话号码:" + data.tel + '
'
; result += "备注:" + data.memo + '
'
; var target = document.getElementById(id); target.innerHTML = result; }
script> body> html>

你可能感兴趣的:(html5)