在html5中与本地存储相关的两个相关内容:Web Storage  与本地数据库

web Storage存储机制是对html4中的cookie存储机制的一个改善。web Storage就是在web上存储数据的功能(针对客户端本地),使用它可以再客户端本地建立一个数据库,这样可以存储页面内容在本地,还加快了访问数据的速度。

web Storage分两种:sessionStorage   与  localStorage

一、sessionStorage

sessionStorage为临时保存,将数据存在session对象中,当浏览器关闭,保存的内容也就消失。

二、localStorage

localStorage为永久保存,将数据保存在客户端本地的硬件设备(硬盘),即使浏览器关闭了,数据任然存在,下次打开该浏览器访问网站时任然可以继续使用

两种方法的保存数据与读取数据的示例,请狠狠的点击这里
使用localStorage方法来制作简单的web留言本,查看效果请狠狠的点击这里

代码展示

 <script type="text/javascript">
function saveStorage(id) {
var data = document.getElementById(id).value;
var time = new Date().getTime();
localStorage.setItem(time, data);
alert("数据已保存。");
loadStorage('msg');
} function loadStorage(id) {
var result = '<table border="1">';
for(var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var value = localStorage.getItem(key);
var date = new Date();
date.setTime(key);
var datestr = date.toGMTString();
result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
}
result += '</table>';
var target = document.getElementById(id);
target.innerHTML = result;
} function clearStorage() {
localStorage.clear();
alert("全部数据被清除。");
loadStorage('msg');
}
</script> <h1>简单Web留言本</h1>
<textarea id="memo" cols="60" rows="10"></textarea><br>
<input type="button" value="追加" onclick="saveStorage('memo');">
<input type="button" value="初始化" onclick="clearStorage('msg');">
<hr>
<p id="msg"></p>

使用localStorage方法来制作简易数据库,查看效果请狠狠点击这里

代码展示

 <script type="text/javascript">
window.onload = function(){
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2"); btn1.onclick = function(){
saveStorage()
}
btn2.onclick = function(){
findStorage('msg')
}
} 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 resule = "姓名:"+ data.name + '<br>';
resule += "emial:" + data.email+'<br>';
resule += "电话:" + data.tel +'<br>';
resule += "备注:"+ data.memo;
var target = document.getElementById(id);
target.innerHTML = resule;
}
</script> <table border="" cellspacing="" cellpadding="">
<tr>
<td>姓名</td>
<td><input type="text" name="" id="name" value="" /></td>
</tr>
<tr>
<td>email</td>
<td><input type="text" name="" id="email" value="" /></td>
</tr>
<tr>
<td>电话号码</td>
<td><input type="text" name="" id="tel" value="" /></td>
</tr>
<tr>
<td>备注</td>
<td><input type="text" name="" id="memo" value="" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" name="" id="btn1" value="保存" /></td>
</tr>
</table>
<br /><br />
<p>
检索名字<input type="text" name="find" id="find" value="" />
</p>
<input type="button" name="btn2" id="btn2" value="检索" />
<div id="msg"></div>

html5本地存储(一)------ web Storage的更多相关文章

  1. 利用HTML5开发Android(4)---HTML5本地存储之Web Storage

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  2. HTML5本地存储之Web Storage应用介绍

    Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Sto ...

  3. HTML5本地存储之Web Storage实例篇,最有用的是localStorage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. HTML5 本地存储(Web Storage)

    HTML5 提供了两种在客户端存储数据的新方法: localStorage - 本地永久存储,下次打开浏览器数据依然存在 sessionStorage - 只存在于一个会话的数据存储,关闭浏览器数据会 ...

  5. 利用HTML5开发Android(7)---HTML5本地存储之Database Storage

    在上一篇<HTML5本地存储之Web Storage篇>中,简单介绍了如何利用localStorage实现本地存储:实际上,除了sessionStorage和localStorage外,H ...

  6. HTML5本地存储 Web Storage

    Web Storage基本介绍 HTML5 定义了本地存储规范 Web Storage , 提供了两种存储类型 API  sessionStorage 和 localStorage,二者的差异主要是数 ...

  7. HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  8. [转]HTML5本地存储——Web SQL Database

    在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数据就 ...

  9. HTML5本地存储——Web SQL Database与indexedDB

    虽然在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage,这两个是以键值对存储的解决方案,存储少量数据结构很有用,但是对于大量结构化数 ...

  10. HTML5 本地存储Web Storage简单了解

    ​HTML5本地存储规范,定义了两个重要的API :Web Storage  和  本地数据库Web SQL Database. 本地存储Web Storage 实际上是HTML4的cookie存储机 ...

随机推荐

  1. 2019杭电多校第六场hdu6638 Snowy Smile(线段树+枚举)

    Snowy Smile 题目传送门 解题思路 先把y离散化,然后把点按照x的大小进行排序,我们枚举每一种x作为上边界,然后再枚举其对应的每一种下边界.按照这种顺序插入点,这是一个压维的操作,即在线段树 ...

  2. HDU 3746 Cyclic Nacklace (KMP找循环节)

    题目链接:HDU 3746 Sample Input 3 aaa abca abcde Sample Output 0 2 5 Author possessor WC Source HDU 3rd & ...

  3. mysql 5.7.20 取得动态sql执行结果

    drop procedure test; delimiter ;; CREATE procedure test() -- 取动态sql的值 begin ); ); set v_sqlcounts = ...

  4. ArcGis 创建含孔洞面要素AO C#

    IGeometryCollection geometryCollection = new PolygonClass(); IPointCollection pointCollection_Exteri ...

  5. aarch64 架构 交叉编译 tcpdump

    1. 下载 tcpdump 源码 地址 :http://www.tcpdump.org/    (4.9.2) tcpdump 依赖 libpcap  源码 地址 : http://www.tcpdu ...

  6. [转] datetime.now、datetime.utcnow以及Django中的timezone.now之间的区别

      https://blog.csdn.net/sinat_41898105/article/details/80984298   在我们使用Django做项目时经常会遇到时间的存储与读取不一致的问题 ...

  7. codeforces863F Almost Permutation 费用流

    题目传送门 题意: 构造出一个数列,数字在$1~n$的范围内,要求$\sum_{i=1}^n  count(i)^{2}$最小,$count(i)$的意思是数列中i出现的次数.并且数列要满足两种类型的 ...

  8. Spring定时任务的几种实现(转)

    转自:http://gong1208.iteye.com/blog/1773177 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息,借此机会整理了一下定时任务的几 ...

  9. Docker拉取镜像时错误解决办法

    拉取docker中的镜像时报错: [root@master ~]# docker pull docker.io/centos:latest Trying to pull repository dock ...

  10. Goaccess的简单使用

    goaccess了,它是一个日志分析工具,并不只是为nginx使用的,你也可以用它来分析apache,具有解析速度快,使用简单,能生成json,html,csv等特点. 1.goaccess的基本安装 ...