HTML5 — Wed Storage简单示例

一、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简单示例的更多相关文章

HTML5 worker计数器简单示例
效果图: index.html var w; // 开始 function startWorker() { if (typeof (Worker) !== "undefined") ...
HTML5 Web Storage 特性
原文地址: Using HTML5 Web Storage 原文日期: 2010年06月28日翻译日期: 2013年08月12日当下Web开发领域最火爆的词语当属 HTML5.HTML5标准的新特 ...
HTML5 Web Storage
Web Storage是HTML5 API提供一个新的重要的特性: 最新的Web Storage草案中提到,在web客户端可用html5 API,以Key-Value形式来进行数据持久存储: 目前主要 ...
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 ...
TextKit简单示例
TextKit简单示例效果源码 https://github.com/YouXianMing/Animations // // TextKitLoadImageController.m // An ...
Websocket - Websocket原理（握手、解密、加密）、基于Python实现简单示例
一.Websocket原理(握手.解密.加密) WebSocket协议是基于TCP的一种新的协议.WebSocket最初在HTML5规范中被引用为TCP连接,作为基于TCP的套接字API的占位符.它实 ...
dubbo简单示例
dubbo简单示例 2019-09-06 1 Zookeeper注册中心的搭建(windows单机) 下载zookeeper压缩包并解压到 D:\zookeeper\apache-zookeeper- ...
【Canvas】(1)---概述+简单示例
Canvas---概述+简单示例如果通俗的去理解Canvas,我们可以去理解成它类似于我们电脑自带的画图工具一样,canvas首先是选择一块画布,然后在这个画布上描绘我们想画的东西,画好后展示给用户 ...
Linux下的C Socket编程 -- server端的简单示例
Linux下的C Socket编程(三) server端的简单示例经过前面的client端的学习,我们已经知道了如何创建socket,所以接下来就是去绑定他到具体的一个端口上面去. 绑定socket ...

随机推荐

kotlin的一些特性介绍和与java C#的简单对比
前言这是我之前在知乎上的一些回答的汇总,感觉还是博客园写这些东西方便一点,也算是理下我的一些思路,现将文章整理后,发布在园子里. 为何是kotlin: 很多人对kt没有一个正确的定位,可能大家第一反 ...
Vijos 1011 清帝之惑之顺治记忆录式的动态规划（记忆化搜索）
背景顺治帝福临,是清朝入关后的第一位皇帝.他是皇太极的第九子,生于崇德三年(1638)崇德八年八月二ten+six日在沈阳即位,改元顺治,在位18年.卒于顺治十八年(1661),终24岁. 顺治即位 ...
（转载）JProfiler试用手记
JProfiler是一款Java的性能监控工具.可以查看当前应用的对象.对象引用.内存.CPU使用情况.线程.线程运行情况(阻塞.等待等),同时可以查找应用内存使用得热点,这里提供有几篇文章供参考:获 ...
vijos1080题解
题目: 对于一个递归函数w(a,b,c) 如果a<=0 or b<=0 or c<=0就返回值1. 如果a>20 or b>20 or c>20就返回w(20,20 ...
网络配置之nmcli
使用nmcli命令配置网络 NetworkManager是管理和监控网络设置的守护进程,设备既就是网络接口,连接是对网络接口的配置,一个网络接口可以有多个连接配置,但同时只有一个连接配置生效. 1 配 ...
Java 常用排序算法实现--快速排序、插入排序、选择、冒泡
public class ArrayOperation { //二分查找算法 public static int branchSearch(int[] array, int searc ...
Argparse4j
argparse4j 是 Python argparse 命令行解析器的 Java 语言移植版.这个要比spring AspectJ 更简单,更方便实现. <dependency> < ...
springJdbc like模糊查询，Spring namedParameterJdbcTemplate like查询
springJdbc like模糊查询,Spring namedParameterJdbcTemplate like查询, SpringJdbc命名参数like模糊查询,namedParameterJ ...
python基础（6）：列表和字典类型
前面我们所接触的数据类型都是存单个值,今天我们来看看可以存多个值的列表和字典. 预习: 1.有列表data=['alex',49,[1900,3,18]],分别取出列表中的名字,年龄,出生的年,月,日 ...
ZooKeeper快速学习
"一入Java深似海",过去自身对于分布式的接触,始终处于使用别人构建的框架的水平,最多就是在nginx配置一下第4层的负载均衡(最后有介绍).随着java使用深入,本文将重点理解 ...

HTML5 — Wed Storage简单示例

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

随机推荐

热门专题