首先,介绍一些需要用到的基本知识。

【JSON】

JSON是数据交互中,最常用的一种数据格式。

由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组、对象等转换为JSON字符串。 传递之后,可以将JSON字符串,再解析为JSON对象。

JSON对象的使用与JS中的对象基本相同,唯一需要区别的是,JSON中的键,必须是字符串。

比如:

var jsonObj = {
"name":"zhangsan",
"age":"12"
}

还有两个特别常用的函数。

* 将JS中的对象、数组,传化为JSON字符串。
*/
var str1 = JSON.stringify(users);
console.log(str1);
/*
* 将JSON字符串转化为JSON对象。
*/
var obj = JSON.parse(str1);
console.log(obj);

总结一下新增或是删除一条数据的基本方法。

【新增一条数据】
 1、 取到录入的各种信息
 2、 把这些信息封装成一个对象。
 3、 从本地文件中,读取出存储数据的数组字符串。并将字符串,转回数组格式。
 如果本地文件中,没有这个数组,就新建一个数组存放。
 4、 数组中,push进一个新组建的对象。
 5、 将新数组,重新转为字符串。把字符串丢回文件。
 6、 重新读取一边文件,重新加载表格。

【删除一条数据】
 1、 从文件中,读取出字符串,转回数组格式。
 2、 判断需要删除的是第几条数据。
 3、 删除掉数组对应的数据、splice
 4、 把新数组重新转为字符串,放回文件。
 5、 重新读取一边文件,重新加载表格。

HTML5 新增Web存储方式,主要有两种:
 localStorage 和 sessionStorage,两个对象在使用方式上没有任何区别,唯一的不同点是存储数据的有效时间
 ① localStorage : 除非手动删除,否则数据将一直保存在本地文件;
 ② sessionStorage : 当浏览器关闭时,sessionStorage就被清空。

[Storage的数据存储]
 1、Storage可以像普通对象一样,使用.追加或者读取最新的数据。
 eg :localStorage.username = "张三";

2、常用的函数

保存数据:localStorage.setItem(key,value);
 读取数据:localStorage.getItem(key);
 删除单个数据:localStorage.removeItem(key);
 删除所有数据:localStorage.clear();
 得到某个索引的key:localStorage.key(index);

下面通过一个具体的案例详细的介绍一下这些函数的用法。

这是一个信息管理平台,首先我们需要注册一个账号。

附上一小部分表单结构的代码:

<div class="right">
<h2>
用户注册
<span>user login</span>
</h2>
<div class="user">
<input placeholder="3-15位字母数字,开头必须是字母" name="userNo" id="userNo" tabindex="1" class="account" autocomplete="off">
<span id="p1">用户名已注册</span>
</div>
<div class="pwd">
<input placeholder="4-10位字母数字组成" type="password" id="pwd" name="pwd" tabindex="2" class="passw" autocomplete="off">
<span id="p2">两次密码输入不一致</span>
</div>
<div class="pwd">
<input placeholder="请再次输入密码" type="password" id="repwd" name="pwd" tabindex="2" class="passw" autocomplete="off">
</div>
<input onclick="addAize()" class="denglu" type="submit" value="注&nbsp;册" tabindex="3">
<p class="zhuce" onclick="denglu()">
点击返回登录页面>>>
</p>
</div>

当我们点击注册的时候,会触发一个点击事件,然后触发函数addAize()。

这个时候,我们需要验证密码是否正确,或是输入的格式是否符合要求。

首先,我们先取出我们所输入的内容。

var user = document.getElementById("userNo").value;
var pwd = document.getElementById("pwd").value;
var repwd = document.getElementById("repwd").value;

具体的验证要求通过正则来验证,这里就不详述了。

若是符合要求,将用户名和密码封装成一个对象。

var site = {
user : user,
pwd : pwd
}

若是第一次注册,则在本地存储中新建一个数组arr=[];

若是已经有数组,则录入这条数据。

if(localStorage.sites == undefined){
var arr = [];
}else{
var str = localStorage.sites;
var arr = JSON.parse(str);
}

验证用户名是否重复或者是两次密码输入是否一致,这里不详述。

当全都通过验证之后,将这条信息存入本地,跳转到登录页。

arr.push(site);
var str = JSON.stringify(arr);
localStorage.sites = str;
alert("注册成功");
location = "登录.html";

登陆的功能其实跟注册很像,也是从本地中取出数据,与输入的数据进行一一比对,或是有相同的,则登陆成功,跳转到主页面。

管理平台的信息录入功能也与注册大同小异,就不每个举例了。

这里主要说一下信息的展示和删除功能。

首先创建一个函数showAllSite()

每当界面刷新或是信息录入的时候,调用这个函数。

function showAllSite(){
var str = localStorage.sitess;
var arr = JSON.parse(str);
var html = "";
if(localStorage.sitess == undefined){
return;
}
arr.forEach(function(item,index){
html += "<tr class='tr' onclick='chooseInput("+index+")' ondblclick='updateSite("+index+")'><td align='center'><input type='checkbox' onclick='chooseInput("+index+")' value='"+index+"' class='checkbox' style='margin-top:15px'/></td><td>"+(index+1)+"</td><td>"+item.name+"</td><td>"+item.city+"</td><td>"+item.home+"</td><td style='color:black'>"+item.jingli+"</td><td style='color:black'>"+item.youbian+"</td><td style='color:black'>"+item.iphone+"</td><td style='color:black'>"+item.star+"</td></tr>";
});
var tbody = document.getElementById("tbody");
tbody.innerHTML = html;
}

因为完整代码太多,可能拿出一段并不能完全明白,我大体解释一下思路。

创建一个html变量,先赋值一个空字符串即可。

首先,将本地存储的数据取出来,转化成对象格式。

然后检测这个对象是否存在,也就是本地是否有一条以上的数据。

然后遍历这些数据,把他们加给表格中,附给html变量。

最后用一开始在文件中就创建好的表格中的tbody。通过.innerHTML = html。将数据打印出来。

这样就可以将添加进去的表单通过表格展示出来。

再介绍删除功能,同样是创建一个函数delSite()附到删除按钮的onclick事件上。

需要注意的是,删除功能一定要有一个确认按钮,也就是confirm()。

当结果返回true的时候,执行这个函数

var checkboxs = document.getElementsByClassName("checkbox");
var count = 0;
var str = localStorage.sitess;
var arr = JSON.parse(str);
for(var i=0; i<checkboxs.length; i++){
if(checkboxs[i].checked){
var index = parseInt(checkboxs[i].value)-count;
count++;
arr.splice(index,1);
}
}
localStorage.sitess = JSON.stringify(arr);
if(count==0){
alert("请至少选择一个删除对象");
}else{
alert("删除成功!共删除"+count+"条数据!");
showAllSite();
}

这段代码的核心思想是,给每一个checkbox加上一个value,通过他们的value值,来匹配这一行列表对应的index值。

检测chenkbox是否被选中,将选中的每一个所对应的那一行删除掉。

因为要彻底删除掉,所以一定不能用delete,要用splice(index,1)。

这样一个简单的信息录入系统就完成了,更多详细的功能我们以后再介绍吧。

用JS制作一个信息管理平台的更多相关文章

  1. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  2. 用JS制作一个信息管理平台(1)

    首先,介绍一些需要用到的基本知识. [JSON] JSON是数据交互中,最常用的一种数据格式. 由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组.对象等转换为JSON字符串. 传递之后 ...

  3. JS制作一个创意数字时钟

    通过js代码制作一个创意数字时钟 通过JS代码实现创意数字时钟效果如下:由数字化的卡通形象图片取代常规的数字显示当前实时北京时间.具体效果示例: 核心重点: (1)Date方法的初步了解 (2)构建模 ...

  4. three.js 制作一个三维的推箱子游戏

    今天郭先生发现大家更喜欢看我发的three.js小作品,今天我就发一个3d版本推箱子的游戏,其实webGL有很多框架,three.js并不合适做游戏引擎,但是可以尝试一些小游戏.在线案例请点击博客原文 ...

  5. 用js制作一个计算器

    使用js制作计算器 <!doctype html> <html lang="en"> <head> <meta charset=" ...

  6. 1000粉!使用Three.js制作一个专属3D奖牌🥇

    背景 破防了 !突然发现 SegmentFault 平台的粉丝数量已经突破 1000 了,它是我的三个博客平台掘金.博客园.SegmentFault中首个粉丝突破 1000 的,于是设计开发这个页面, ...

  7. JS制作一个通用的商城版历史浏览记录

    正在开发一个b2c的国外商城,昨天做了一个历史浏览记录发出来跟大家分享一下. JS: //cookie相关函数 function getCookieVal(offset) {    var endst ...

  8. 通过JS制作一个简易数码时钟

    设计思路: 数码时钟即通过图片数字来显示当前时间,需要显示的图片的URL根据时间变化而变化. a.获取当前时间Date()并将当前时间信息转换为一个6位的字符串; b.根据时间字符串每个位置对应的数字 ...

  9. 使用JS制作一个鼠标可拖的DIV(四)——缩放

    原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...

随机推荐

  1. jsp函数的使用

    在这篇博客里面谈一谈jsp函数的一些使用规则 1.在jsp里面,函数和类是等价的,因为在函数的内部可以定义函数和变量.定义在函数内的函数和变量分为实例属性.实例函数.类属性.类函数.实例和类是面向对象 ...

  2. tomato dualwan /root目录的特殊用途

    测试发现tomato dualwan /root目录下存储的文件重启后会自动清掉.利用这个特性可以把测试生成的临时文件丢到这里. root下本应该存在的.vimrc 文件 采用如下方法生成: 在/op ...

  3. 灵玖软件NLPIRParser智能文本聚类

    随着互联网的迅猛发展,信息的爆炸式增加,信息超载问题变的越来越严重,信息的更新率也越来越高,用户在信息海洋里查找信息就像大海捞针一样.搜索引擎服务应运而生,在一定程度上满足了用户查找信息的需要.然而互 ...

  4. 框架 之 -------Spring

    目录一.Spring工作原理 二.为什么要用Spring三.请你谈谈SSH整合四.介绍一下Spring的事务管理五.什么是依赖注入,依赖注入的作用是什么? 六.什么是AOP,AOP的作用是什么? 七. ...

  5. Linux(4)系统管理

    系统管理 cal :查看当前月份和日历, 加-y查看整年日历 date :显示或设置时间 设置时间格式(需要管理员权限) date [MMDDhhmm[[CC]YY][.ss]]+format CC为 ...

  6. C语言左值,运算符的优先级以及结合性探讨

    刚刚开始看一本书.<C陷阱与缺陷>,相信学习C语言的大家都对这本书有耳闻.今天看到了里面的贪心法则.也即在读到一个字符后,尽可能多的读入更多的字符,直到读入的字符组成的字符串已经不可能再组 ...

  7. 玛雅游戏[NOIP2011]

    题目描述 Mayan puzzle 是最近流行起来的一个游戏.游戏界面是一个7 行5 列的棋盘,上面堆放着一些方块,方块不能悬空堆放,即方块必须放在最下面一行,或者放在其他方块之上.游戏通关是指在规定 ...

  8. vsftp虚拟主机

    ################################Vsftp服务器实战##########################################3 文件传输协议,基于该协议FT ...

  9. go的变量redeclare的问题,golang的一个小坑

    go的变量声明有几种方式: 1 通过关键字 var 进行声明 例如:var i int   然后进行赋值操作 i = 5 2 最简单的,通过符号 := 进行声明和赋值 例如: i:=5 golang会 ...

  10. python_正则表达式

    re.match函数 re.match 尝试从字符串的起始位置匹配一个模式,如果不是起始位置匹配成功的话,match()就返回none. 函数语法: \[re.match(pattern, strin ...