在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. PAT甲级——A1141 PATRankingofInstitution

    After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...

  2. MySQL-技术专区-mysql数据库权限管理

      登入root账户 mysql -u root -p 查看所有用户 select host,user from mysql.user; 查看某个用户的权限: show grants for user ...

  3. 判断url

    //判断url地址 isUrl(str){ let reg = /[0-9a-zA-z]+.(html|htm|shtml|jsp|asp|php|com|cn|net|com.cn|org)$/; ...

  4. clip-path 加边框border

    最近些项目,需求是写一个箭头图案,想着就用clip-path来写,但是写到后来发现clip-path 无法加边框,最后用了个死办法写了出来,仅供参考 下图是设计图 如下是实现方案(就是写两层,外面一层 ...

  5. 【牛客网-剑指offer】斐波拉契数列

    题目: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0).n<=39 知识点: 一列数:从1开始,前两项为1,从第三项开始每一项等于前两项之和 ...

  6. ionic3.0 alipay-base插件移除后会添加多余的链接文件在nodes-modules中,导致再安装其他插件或移除插件时报错问题

    1.报错截图: 2.如图因为nodes-module 文件夹中有多余的链接文件导致报错. 3.解决方法:将该链接文件删除即可.

  7. START TRANSACTION - 开始一个事务块

    SYNOPSIS START TRANSACTION [ ISOLATION LEVEL { READ COMMITTED | SERIALIZABLE } ] [ READ WRITE | READ ...

  8. 第三章 k8s的node节点配置

    一.修改主机名 hostnamectl set-hostname xxx 二.修改hosts文件vim /etc/hosts 三.将写好的hosts文件拷贝到其他节点 scp /etc/hosts r ...

  9. Nginx反向代理与负载均衡应用实践(一)

    Nginx反向代理与负载均衡应用实践(一) 链接:https://pan.baidu.com/s/1xB20bnuanh0Avs4kwRpSXQ 提取码:migq 复制这段内容后打开百度网盘手机App ...

  10. C++中的delete加深认识

    delete操作: 我们在删除一个指针之后,编译器只会释放该指针所指向的内存空间,而不会删除这个指针本身. 1.假如你不去释放,那么该区域的内存始终不能被其他数据所使用.2.指向该内存的指针是个局部变 ...