Web Storage作为简单数据库存储信息

最新推荐文章于 2020-11-16 21:43:48 发布
最新推荐文章于 2020-11-16 21:43:48 发布
阅读量505 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/tianmaxingkong_/article/details/47746605
本文介绍如何使用WebStorage（localStorage）技术实现通讯录的数据存储、展示和查询功能，通过HTML表单收集联系人信息，并利用JavaScript进行数据操作和本地存储管理。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用Web Storage（localStorage）实现通讯录的存储，显示和查询。

效果图：


代码截图：



源代码：

dbstore.html

<body>
    <table>
        <tr>
            <th>姓名：</th>
            <th><input type="text" id="name"></th>
        </tr>
        <tr>
            <th>Email：</th>
            <th><input type="text" id="email"></th>
        </tr>
        <tr>
            <th>电话号码：</th>
            <th><input type="text" id="tel"></th>
        </tr>
        <tr>
            <th>备注：</th>
            <th><input type="text" id="memo"></th>
        </tr>
        <tr>
            <th colspan="2">
                <input type="button" id="id_save" value="保存" onclick="saveInfo()">
                <input type="button" id="id_clear" value="清空记录" onclick="clearData()">
            </th>
        </tr>
    </table>
    <hr/>
    <p id="id_p"></p>
    检索：<input type="text" id="id_search_input"/>
    <input type="button" value="检索" onclick="showResult('id_p')"/><br/>
    <input type="button" value="显示全部" onclick="showAllData('id_p_all')" /><br />
    <p id="id_p_all"></p>
</body>

dbstore.js

function saveInfo() {
    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); //将Object转化为Json数据类型
    localStorage.setItem(data.name, str);
    alert("数据存储成功！");
}


function showResult(id_show) {
    var key = document.getElementById('id_search_input').value;
    var str = localStorage.getItem(key);
    var data = JSON.parse(str);
    var result = "姓名：" + data.name + "<br/>Email:" + data.email + "<br/>电话号码："
        + data.tel + "<br/>备注：" + data.memo;
    var target = document.getElementById(id_show);
    target.innerHTML = result;
    //target.innerText = result;
}


function clearData() {
    localStorage.clear();
    alert("删除成功！");
}


function showAllData(id_show){
    var target = document.getElementById(id_show);
    var result = "<table cellspacing='0' border='1'><tr><th>姓名</th><th>Email</th><th>电话号码</th><th>备注</th></tr>";
    for(var i = 0; i < localStorage.length; i++)
    {
        var key = localStorage.key(i);
        var str = localStorage.getItem(key);
        var data = JSON.parse(str);
        result += "<tr><th>" + key + "</th><th>" + data.email + "</th><th>"
            + data.tel + "</th><th>" + data.memo + "</th></tr>";
    }
    result += "</table>";
    target.innerHTML = result;
    // target.innerText = result;
}

（七）webStorage使用实例——webStorage作为简易数据库来使用
lmb55的专栏
07-03 2650
webStorage作为简易数据库来使用
WebStorage数据储存
feishideshigaun的博客
04-27 719
WebStorage储存 什么是WebStorage HTML5 的 Web Storage 可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。 这些数据可以是临时的（浏览器一关就自动删除），或者是长期存在的（无论多少天之后打开网站，仍然可以访问这些数据）。 WebStorage写法 // 两种写法 localStorage.name="xin"; ...
web storage 作为简易数据库的使用
Jinmy的博客
09-10 517
需要两个函数来处理，分别是保存数据用的savaStorage与检索数据用的findStorage。 一、savaStorage函数的流程 1.从各 输入文本框中获取数据; 2.创建对象，将获取的数据作为对象的属性进行保存; 3.将对象转换成JSON格式的文本数据; 4.将文本数据保存在localStorage中 将对象转换成JSON格式的文本数据， 使用发JSON对象的stringif...
html5 webstorage做简易数据库
weixin_44746630的博客
03-08 205
在这里插入代码片 <div class="shuru"> <ul> <li><span>姓名：</span><input type="text" id="name" placeholder="请输入姓名..." /></li> <li><span>邮箱...
《Javascript权威指南》学习笔记之十七：BOM新成就（1）--客户端存储数据（Storage实现）
淡忘~浅思
06-12 1885
《Javascript权威指南》学习笔记之十七：BOM新成就（1）--客户端存储数据（Storage实现）。 数据构成了web站点的实际内容，这些数据多种多样，可以是独立的文件，也可以是位于某个数据库文件或者数据库服务器之中。现在，HTML 5 BOM允许在客户端实现较大规模的数据存储：一是web存储，二是Web SQL数据库存储。 一、Web存储概述 Web存储机制是一种通过字符串形式的key/value对来安全的存储和使用数据的方法。Web存储和HTTP Cookie的区别在于：
HTML5 WebStorage与本地数据库：优化与优势
WebStorage技术的核心概念有两个部分：sessionStorage和localStorage。sessionStorage用于临时存储数据，当用户关闭浏览器或页面刷新时，数据会被清除。而localStorage则提供长期存储，除非手动删除，否则数据将一直...
HTML5 WebStorage与本地数据库：优化客户端数据存储
<title>WebStorage 实验 <h1>WebStorage 实验 ; border: 1px solid;"> // 存储数据 localStorage.setItem('key', 'value'); // 读取数据 var value = localStorage.getItem('key'); document....
HTML5 WebStorage与本地数据库实战解析
然而，Web SQL Database已被废弃，尽管某些浏览器仍支持，推荐使用IndexedDB作为替代。 4. IndexedDB - IndexedDB是现代浏览器推荐的本地数据库解决方案，它提供了一种更强大、更灵活的方式来存储大量结构化数据，...
awesome-web-storage：您需要了解的有关客户端存储的所有信息
02-02
6. **其他存储解决方案**：除了上述存储方式，还有IndexedDB、WebSQL（已废弃）等数据库技术，以及Service Worker提供的离线缓存策略，它们为Web应用提供了更复杂的数据管理和离线支持。 总之，理解并熟练使用Web...
webstorage:用于键值数据的简单、可插拔、符合 W3C Web Storage 的 API
06-09
您可以跨任何后端（例如内存数据库、本地文件系统、mongodb、redis 等）集成或重用 webstorage 接口。 默认情况下，webstorage 不持久化数据。 这意味着它将使用内存对象作为其后端。 var webstorage = require ...
Web Storage 数据存储
lzq1039602600的专栏
03-12 472
Web Storage 数据存储是针对于客户端本地而言的，共有两种形式  sessionStorage和loadStorage。 sessionStorage：作用时间是在该网页打开到关闭的时间，session可以用来保存在该时间了的所有数据。 localStorage：将数据保存在客户端的硬件设备中，网页关闭后再次打开仍可用。  简单使用方法： //sessionStorage
HTML 5 中WebStorage实现数据本地存储
在爬行中进步
10-27 2017
webstorage 分sessionStorage和localstorage，sessionStorage是临时保存，localStorage是永久保存。 sessionStorage如果浏览器关闭了，数据就没有了，而localStorage则不会。 sessionStorage： 保存数据     sessionStorage.setItem(key, value); 读取数据
HTML5----Web Storage存储web数据
meikidd的专栏
05-07 686
Web Storage是个好东西（Web Storage全解析，Web Storage使用教程），但是在使用localStorage.key= value赋值的时候，不管是什么类型的值，都会自动调用js的toString方法，转换为字符串存储。最好是自己重写各种类型的toString方法。
Web存储技术--WebStorage
JackZhang的专栏
01-07 908
Web开发中，必然会遇到需要临时或永久保存的数据。 传统用cookie保存在客户端，或通过sessionID关联session对象（如Servlet的HttpSession对象）保存在服务器端。 缺点是cookie实在太小，只有4k，已经无法应付现在的大数据时代了。而保存在服务器端很多时间根本没必要，本地保存一下即可，何必再和服务器交互一下呢？ 因此出台了新的存储技术：WebStorage
Web存储(Web Storage)介绍
weixin_30872157的博客
03-17 204
Web存储即在客户端存储数据。 在没有Web Storage之前，是通过cookie来在客户端存储数据的。但是由于 浏览器能存cookie数比较少。如IE8，Firefox,opera每个域可以保存的50个cookie,Safari/WebKit没有限制。一个cookie最多可以存放4096B左右的数据（见http://www.ietf.org/rfc/rfc2965.txt）。 每次...
Web Storage：简单强大的客户端数据存储技术
记事本
10-18 1969
随着Javascript的使用变得越来越复杂，以及新标准和技术的产生，Web应用程序每天都在发生着令人惊喜的进步。同时我们也增加了对这些Web应用的依赖性，它们中有很多已经变成我们日常生活中的一部分。我们也知道Web应用开发的不足之一就是在客户端存储数据的能力，直到现在为止，随着HTML5标准和相关技术的成熟，才发生了本质的改变。 Web Storage 是W3C规范，提供了在客户端存储数
数据的两种存储方式 cookie 和 webstorage
weixin_41646391的博客
02-24 864
什么是cookie？通俗的说就是当一个用户通过HTTP协议访问一个服务器的时候，这个服务器会将一些键值对（key：value）返回给客户端浏览器，并在这些数据上加一些限制，在条件符合是，这个用户下次访问这个浏览器的时候，数据又被完整的待会给服务器；cookie是浏览器提供的一种机制，可以有javascript对其进行控制，而不是javascript本身的性质我们也可以这样来理解：cookie就像是...
第19章　Web存储
唯美清泠
11-16 639
第19章　Web存储 Web应用的发展，使得客户端存储的用途也越来越多，而实现客户端存储的方式则是多种多样。最简单且兼容性最佳的方案是Cookie，但是作为真正的客户端存储，Cookie存在很多缺陷。HTML5提出了更多解决方案：如果存储复杂的数据，可以使用Web Database，该方法可以像客户端程序一样使用SQL；如果需要存储简单的key/value（键值对）信息，可以使用Web Storage。本章将主要介绍Cookie、Web Storage和Web Database。 【学习重点】 ▲　了
网页存储 web storage(理论)
candy_li123的博客
11-30 449
web storage提供两种方式将数据保存在客户端：一种是localStorage，另一种是sessionStorage； （一）存储、读取和清除localStorage<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>localStorage</title> <script t
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值