一、Wed Storage 概述

Wed Storage功能:在Wed上储存数据的功能,这里的储存是针对客户端本地而言的。

具体分为两种:

sessionStorage,将数据保存在session对象中。session是指用户在浏览某网站时,从进入网站到浏览器关闭所经过的这段时间,也是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的如何数据。

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

示例:

 HTML5 内容
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="appWeb1.js"></script>
7 </head>
8 <body>
9 <p id="msg"></p>
10 <input type="text" id="input">
11 <input type="button" value="保存数据" onclick="saveStorage('input')">
12 <input type="button" value="读取数据" onclick="loadStorage('msg')">
13 </body>
14 </html>
 appWeb1.js 部分
1 // function saveStorage(id) {
2 // var target = document.getElementById(id);
3 // var str = target.value;
4 // // 保存数据的方法key value
5 // sessionStorage.setItem("message",str);
6 // }
7 // function loadStorage(id) {
8 // var target = document.getElementById(id);
9 // 读取数据
10 // var msg = sessionStorage.getItem("message");
11 // target.innerHTML = msg;
12 // }
13 localStorage部分
14 function saveStorage(id) {
15 var target = document.getElementById(id);
16 var str = target.value;
17 localStorage.setItem("message",str);
18 }
19 function loadStorage(id) {
20 var target = document.getElementById(id);
21 var msg = localStorage.getItem("message");
22 target.innerHTML = msg;
23 }

二、 简单Wed留言本

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Storage</title>
<script src="appWeb2.js"></script>
</head>
<body>
<h3>简易留言板</h3>
<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>
</body>
</html>
 appWeb2.js
function saveStorage(id) {
//获取textarea的value值
var data = document.getElementById(id).value;
//获取当前时间戳
var time = new Date().getTime();
//将时间戳作为键值,textarea的value值作为键值的内容保存在本地数据库
localStorage.setItem(time,data);
//保存成功后提示成功
alert("数据已保存");
//设置loadStorage函数的传参(ID值)
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();
//将时间戳转化为正常时间 Mon Jun 19 1972 11:12:44 GMT+0800 (中国标准时间) 的格式
date.setTime(key);
//将转化后的内容变成字符串
var datestr = date.toGMTString();
//将所有新增内容添加到result变量中
result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>'
}
result += '</table>';
var target = document.getElementById(id);
//将所有内容添加到元素中显示
target.innerHTML = result;
} function clearStorage() {
//清除本地储存所有内容
localStorage.clear();
alert("清除完毕");
}

显示效果:

三、本地存储——简易数据库

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易数据库</title>
<script src="appWeb3.js"></script>
</head>
<body>
<h3>使用Web Storage 实现简易数据库实例</h3>
<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="meno"></td></tr>
<tr><td></td><td><input type="button" value="保存" onclick="saveStorage()"></td></tr>
</table>
<hr>
<p>检索:
<input type="text" id="find">
<input type="button" value="检索" onclick="findStorage('msg')">
</p>
<p id="msg"></p>
</body>
</html>
 //appWed3.js
function saveStorage() {
//创建一个对象,并将所有input的内容放到对象各属性中
var data = new Object;
data.name = document.getElementById("name").value;
data.email = document.getElementById("email").value;
data.tel = document.getElementById("tel").value;
data.meno = document.getElementById("meno").value;
//将对象中所有属性和值转换成JSON字符串格式
var str = JSON.stringify(data);
//以data对象中的name属性作为键值,打包后JSON数据作为内容保存到本地数据库中
localStorage.setItem(data.name,str);
//保存成功后显示提示
alert("数据已保存");
} function findStorage(id) {
//获取input框中输入的值
var find = document.getElementById('find').value;
//将获取到的值,通过键值查找键值下的内容
var str = localStorage.getItem(find);
//将查询到的内容从JSON字符串转换成JS对象
var data = JSON.parse(str);
//将对象中所有值,依次获取出来
var result = "姓名:"+data.name+"<br/>";
result += "邮箱:"+data.email +"<br/>";
result += "电话:"+data.tel +"<br/>";
result += "备注:"+data.meno +"<br/>";
var target = document.getElementById(id);
target.innerHTML = result;
}

显示效果:

HTML5 — Wed Storage简单示例的更多相关文章

  1. HTML5 worker计数器简单示例

    效果图: index.html var w; // 开始 function startWorker() { if (typeof (Worker) !== "undefined") ...

  2. HTML5 Web Storage 特性

    原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日 翻译日期: 2013年08月12日 当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...

  3. HTML5 Web Storage

    Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...

  4. SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论 SignalR 简单示例 通过三个DEMO学会SignalR的三种实现方式 SignalR推送框架两个项目永久连接通讯使用 SignalR 集线器简单实例2 用SignalR创建实时永久长连接异步网络应用程序

    SignalR代理对象异常:Uncaught TypeError: Cannot read property 'client' of undefined 推出的结论   异常汇总:http://www ...

  5. TextKit简单示例

    TextKit简单示例 效果 源码 https://github.com/YouXianMing/Animations // // TextKitLoadImageController.m // An ...

  6. Websocket - Websocket原理(握手、解密、加密)、基于Python实现简单示例

    一.Websocket原理(握手.解密.加密) WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实 ...

  7. dubbo简单示例

    dubbo简单示例 2019-09-06 1 Zookeeper注册中心的搭建(windows单机) 下载zookeeper压缩包并解压到 D:\zookeeper\apache-zookeeper- ...

  8. 【Canvas】(1)---概述+简单示例

    Canvas---概述+简单示例 如果通俗的去理解Canvas,我们可以去理解成它类似于我们电脑自带的画图工具一样,canvas首先是选择一块画布,然后在这个画布上描绘我们想画的东西,画好后展示给用户 ...

  9. Linux下的C Socket编程 -- server端的简单示例

    Linux下的C Socket编程(三) server端的简单示例 经过前面的client端的学习,我们已经知道了如何创建socket,所以接下来就是去绑定他到具体的一个端口上面去. 绑定socket ...

随机推荐

  1. Visual Studio 2017离线安装包下载、安装

    1. 首先下载在线安装exe,官网地址https://www.visualstudio.com/zh-hans/downloads/ 2. 运行CMD, 执行脚本 vs_enterprise.exe ...

  2. android权限(permission)大全

    权限添加位置: 权限代码: 1.android.permission.WRITE_USER_DICTIONARY允许应用程序向用户词典中写入新词 2.android.permission.WRITE_ ...

  3. Web office apps 安装部署

    系统要求为Windows Server 2012, 注意:安装Office Web Apps的服务器除了Office Web Apps之外,不能安装其他应用.包括不能安装Office,lync,,sh ...

  4. H3CNE实验:配置交换机接口

    第1步:配置交换机端口 <H3C>system-view System View: return to User View with Ctrl+Z. [H3C]interface Giga ...

  5. Perl初试

    通过接口发送短信的socket小样: #!/usr/bin/perl -w # auth:lichmama@cnblogs.com # what:send message to phone # usa ...

  6. JQuery中实现Ajax

    简单小案例: $("input").click(function() { $.get("test.txt",function(data){ $("h1 ...

  7. 腾讯地图JS API实现带方向箭头的线路Polyline

    最近产品提出一个需求,在我们使用的腾讯地图上为线路polyline添加线路方向.例如下图所示: 查找腾讯地图JS API提供的API,没有找到对应的支持,询问负责腾讯地图的人也得到了同样的答案,即地图 ...

  8. easyui-dialog里面的东西

    <div id="id_open" class="easyui-dialog" title="公司简介" style="wi ...

  9. UVa455 Periodic String 的wronganswer问题探讨,以及AC的新思路

    题目的意思是一个字符串有某个长度为k的字符串通过不断重复形成的,而k被称为该字符串的周期.而我们所要做的是找出该字符串的最小周期. input The first line is an integer ...

  10. 使用Nginx+CppCMS构建高效Web应用服务器(之三)

    使用Nginx+CppCMS构建高效Web应用服务器(之三) --充分利用服务器和客户端计算能力 欢迎测试,攻击:http://www.litelottery.com     网页右上角,选择博彩,演 ...