web storage 作为简易数据库的使用

最新推荐文章于 2023-06-17 00:21:47 发布

JinmyHe

最新推荐文章于 2023-06-17 00:21:47 发布

阅读量452

点赞数

分类专栏： web前端-Javascript 文章标签： web storage

本文链接：https://blog.csdn.net/weixin_42659625/article/details/82505356

版权

web前端-Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

需要两个函数来处理，分别是保存数据用的savaStorage与检索数据用的findStorage。

一、savaStorage函数的流程

1.从各输入文本框中获取数据;

2.创建对象，将获取的数据作为对象的属性进行保存;

3.将对象转换成JSON格式的文本数据;

4.将文本数据保存在localStorage中

将对象转换成JSON格式的文本数据，使用发JSON对象的stringify方法;

var str = JSON.stringify(data);

该方法接受一个参数data,该参数表示要转换成 JSON格式文本数据的对象。

二、findStorage函数的流程

1.在localStorage中同，将检索用的姓名作为键值，获取对应的数据

2.将获取的数据转换成JSON对象

3.取得JSON对象中的各个属性值，创建要输出的内容

4.在页面上输出内容

该函数的关键是使用 JSON对象的parse方法。将从localStorage中获取的数据转换成 JSON对象：

var data = JSON.parse(str);

完整案例代码如下：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>简易数据库</title>
    <style>

    </style>


</head>

<body>

<h1> 简易数据库 案例</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>
    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 += "电话号码: " + data.tel + '<br>';
        result += "备注：" + data.memo + '<br>';
        var target = document.getElementById(id);
        target.innerHTML = result;
        
    }

    
</script>
</body>

</html>

结果：

JinmyHe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web storage 作为简易数据库的使用

需要两个函数来处理，分别是保存数据用的savaStorage与检索数据用的findStorage。一、savaStorage函数的流程1.从各输入文本框中获取数据;2.创建对象，将获取的数据作为对象的属性进行保存;3.将对象转换成JSON格式的文本数据;4.将文本数据保存在localStorage中将对象转换成JSON格式的文本数据，使用发JSON对象的stringif...
复制链接

扫一扫