一、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     网页右上角,选择博彩,演 ...