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

来源：互联网发布：淘宝代理运营编辑：程序博客网时间：2024/05/17 23:02

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

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

效果预览：
这里写图片描述

关键知识点：

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

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

代码部分：

<!DOCTYPE html><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 + '<br />';                result += "EMAIL：" + data.email + '<br />';                 result += "电话号码：" + data.tel + '<br />';                result += "备注：" + data.memo + '<br />';                var target = document.getElementById(id);                target.innerHTML = result;            }        </script>    </body></html>

阅读全文

0 0