(七)webStorage使用实例——webStorage作为简易数据库来使用
webStorage作为简易数据库来使用
如果想用webStorage作为数据库,首先要考虑以下问题:
1、在数据库中,大多数表都分为几列,怎样对列进行管理?
2、怎样对数据库进行检索?
实现原理:(客户联系信息管理网页)
客户联系信息分为姓名、Email、电话号码、备注这几列,保存在localStorage中。如果输入客户的姓名并且进行检索可以获取该客户的所有信息;首先,保存数据时将客户的姓名作为键名来保存,这样在获取客户其他信息是会比较方便;然后,怎样将客户联系信息分几列来进行保存呢?要做到这一点,需要使用JSON格式。将对象以JSON格式作为文本来保存,获取该对象时再通过JSON格式来进行获取,就可以在webStorage中保存和读取具有复杂结构的数据了。【JSON格式是javascript Object Notation的缩写,是将javascript中的对象作为文本形式来保存时所使用的一种格式】。
实现代码:
database.html
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>简易数据库示例</title><script type="text/javascript" src="script3.js"></script>
</head>
<body><h1>使用webStorage来做简易数据库示例</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="保存" οnclick="saveStorage();"></td></tr></table><hr><p>检索:<input type="text" id="find"><input type="button" value="检索" οnclick="findStorage('msg');"></p><p id="msg"></p>
</body>
</html>
script3.js
//用于保存数据
function saveStorage(){//saveStorage函数的处理流程//1、从个输入文本框中获取数据//2、创建对象,将获取的数据作为对象的属性进行保存//3、将对象转换成JSON格式的文本框//4、将文本数据保存到localStorage中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){//findStorage函数的处理流程//1、在localStorage中,将检索用的姓名作为键值,获取对应的数据//2、将获取的数据转换成JSON对象//3、取得JSON对象的各个属性值,创建要输出的内容//4、在页面上输出内容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;
}
运行结果:
(七)webStorage使用实例——webStorage作为简易数据库来使用相关推荐
- C++实现的基于NSM的简易数据库
1 引言 1.1 实验目的 深入掌握数据库系统的原理和技术,进而从事数据库管理软件和工具的开发 深入了解数据库系统的内部结构,以开发出高效的数据库应用系统 1.2 实验要求 实验的总体要求是:利用C+ ...
- 阿里云rds for mysql平台介绍_阿里云RDS for MySQL实例创建账号和数据库?
本文介绍如何为RDS for MySQL实例创建账号和数据库. 账号类型RDS for MySQL实例支持两种数据库账号:高权限账号和普通账号.您可以在控制台管理所有账号和数据库,账号拥有的具体权限请 ...
- python数据库实例_Python操作MySQL数据库9个实用实例
用python连接mysql的时候,需要用的安装版本,源码版本容易有错误提示.下边是打包了32与64版本. MySQL-python-1.2.3.win32-py2.7.exe MySQL-pytho ...
- SVG 教程 (七)SVG 实例,SVG 参考手册
SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中. 谷歌Chrome,火狐,Internet Explorer9,和Safari都支持. 注意:下面的例子将不会在Opera运行 ...
- Android开发笔记(一百七十五)利用Room简化数据库操作
虽然Android提供了数据库帮助器,但是开发者在进行数据库编程时仍有诸多不便,比如每次增加一张新表,开发者都得手工实现以下代码逻辑: 1.重写数据库帮助器的onCreate方法,添加该表的建表语句: ...
- linux mysql 实战_Linux平台MySQL多实例项目实施_MySQL数据库基础与项目实战06
Linux平台MySQL多实例项目实施_MySQL数据库基础与项目实战06 视频教程学习地址 Oracle/MySQL数据库学习专用QQ群:336282998.189070296 学完风哥本课程能熟悉 ...
- python数据库管理实例_Python操作MySQL数据库9个实用实例
在Windows平台上安装mysql模块用于Python开发 用python连接mysql的时候,需要用的安装版本,源码版本容易有错误提示.下边是打包了32与64版本. MySQL-python-1. ...
- mysql导出权限授权_本文实例讲述了mysql数据库创建账号、授权、数据导出、导入操作。分享给大家供大家参考,具体如下:1、账号创建及授权grant all privileg...
本文实例讲述了mysql数据库创建账号.授权.数据导出.导入操作.分享给大家供大家参考,具体如下: 1.账号创建及授权 grant all privileges on *.* to 'yangxin' ...
- 如何用C++实现一个简易数据库(九)
如何用C++实现一个简易数据库(九) 本文是<如何用C++实现一个简易数据库>的第九个单元 源码位于tutorial09-实现拆分叶结点 1. 如何分裂叶子结点? 按照惯例,我们先增加一个 ...
最新文章
- 这些 Python 不为人知的「坑」,躲都躲不开
- 麦司机博客项目技术选型-Java后端
- arthas class/classloader相关命令之一:sc、sm
- solver.prototxt参数说明(三)
- MySQL复习资料(三)——MySQL-DML语句
- 海外 谷歌 app api_Google App Engine Java功能和命名空间API
- android+图标+i_explore+无背景,Android Studio中Android Device Monitor中的File Explore不显示文...
- HDU2999 Stone Game, Why are you always there?【SG函数】
- FixedLengthFrameDecoder 固定长度解码器,解决 TCP 粘包
- Python3.6 word批量转换为txt提取
- ​越狱iOS必备神器Flex使用指南-屏蔽越狱检测的破解利器
- python单位根检验平稳性怎么看是否平稳_PYthon ADF 单位根检验 如何查看结果
- 机器人跳钢管舞,岂止是性感
- CAPM模型的Python版详解
- vos与呼叫中心系统的关系
- android 抽奖动画下载,召唤抽奖系统正式版
- 【iOS】调起地图进行导航(系统地图、高德、百度)
- 非管理型宽温防雷4口百兆光纤收发器工业导轨式发送机工业级以太网光纤收发器
- 美国访问学者签证材料清单
- 武大计算机科学与技术弘毅学堂,弘毅学堂