简单的HTML5 Web Storage留言册

在这用一个简单的示例在讲解一下如何利用Web Storage来保存和读取数据。

示例HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 WebStorage 留言本</title>
<script type="text/javascript" src="JS/liuyanben.js"></script>
</head>
<body>
<h3>HTML5 WebStorage 留言本</h3>
<textarea id="demo" cols="60" rows="10"></textarea><br />
<input type="button" value="留言" οnclick="savelocalStorage('demo');" />
<input type="button" value="清除留言" οnclick="clearlocalStorage('msg');" />
<hr />
<p id="msg"></p>
</body>
</html>

示例所用到的liuyanben.js 代码如下：

// JavaScript Document
function savelocalStorage(id){
var data=document.getElementById(id).value;
var time=new Date().getTime();
localStorage.setItem(time,data);
loadlocalStorage('msg');
}

function loadlocalStorage(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 clearlocalStorage(){
localStorage.clear();
loadlocalStorage('msg');
alert("localStorage留言已被清除！");
}

通过我们发现这个JS代码中有三个调用的函数，savalocalStorage、loadlocalStorage和clearlocalStorage。

1.savalocalStorage：使用new Date().getTime()得到当前时间，调用loadlocalStorage，将时间保存为键名，将文本框中的保存为键值，再调用localStorage函数在页面上显示保存的数据。

2.loadlocalStorage：取得数据用到了localStorage.length和localStorage.key两个重要的localStorage函数。localStorage.length是所有保存在localStorage中的数据条数，localStorage.key是将数据的索引号做为index传入，可以得到索引号对应的数据。索引从0开始，如第2条数据的所以号是1。

3.clearlocalStorage：利用localStorage中的clear方法，清除保存在localStorage中的全部数据。

注：为什么以日期和时间来做为键名？因为日期和时间的值是以时间戳的形式进行管理，所以不可能存在重复的键名。

转载于:https://www.cnblogs.com/mixer/archive/2012/04/12/2444527.html

简单的HTML5 Web Storage留言册相关推荐

使用 jQuery Mobile 与 HTML5 开发 Web App (十六) —— HTML5 Web Storage
绝大多数的软件都需要使用某种具有持久性的方式来存储数据,Web Apps 也不例外,涉及到完整后台的 Web Apps ,可以直接在后台使用 mysql 等数据库来存储数据,但过多的 sql 查询会影 ...
HTML5 Web Storage用法
早期的网页数据存储只能依赖于cookies,但它存在着容量有限且很小,不便于复杂数据的管理等问题,此外,还需将cookies附带在每一次网络请求之中.HTML5的出现,极大地增加了开发人员的开发灵活度 ...
html5 web storage攻击,HTML5安全风险详析之二：Web Storage攻击
**一.WebStorage简介** HTML5支持WebStorage,开发者可以为应用创建本地存储,存储一些有用的信息.例如LocalStorage可以长期存储,而且存放空间很大,一般是5M,极大 ...
HTML5 Web Storage事件
Storage事件在某些复杂情况下,如果多个页面都需要访问本地存储的数据,就需要在存储区域的内容发生改变时,能够通知相关的页面. Web Storage API内建了一套事件通知机制,当存储区域的内 ...
HTML5 Web Storage API
Web Storage API Web Storage 是以键值对(key-value)的形式存储数据,要存储的数据需要一个名字作为键,然后就可以使用这个键来读取它的值.键是一个字符串.值可以是 Ja ...
HTML5 基础知识，第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值，Canvas 提供的创造性，以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
HTML5 Web存储（Web Storage）技术以及用法
使用HTML5可以在本地存储用户的浏览数据.早些时候,本地存储使用的是 cookie.但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以 ...
Web Storage中的sessionStorage和localStorage
html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...
Where to Store your JWTs – Cookies vs HTML5 Web Storage--转
原文地址:https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage Update 5/12/20 ...
使用 web storage 制作简单留言本
使用 getItem 方法或使用 sessionStorage 对象或 localStorage 对象的自定义属性值读取数据,使用 setItem 方法或使用 sessionStorage 对象或 l ...

简单的HTML5 Web Storage留言册

简单的HTML5 Web Storage留言册相关推荐

最新文章

热门文章