`

HTML5之Web Storage本地存储

阅读更多

一.Web Storage

在HTML5中,除了Canvas元素之外,另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能,我们知道,在HTML4中可以使用cookies在客户端保存用户名灯简单的用户信息,但是,通过长期的实际使用下来,发现使用cookies存储数据存在弊端:

  • 大小:cookies的大小被限制在4KB。
  • 带宽:cookies是随HTTP事务一起被发送的,因此会浪费发送cookies的带宽。
  • 复杂性:要正确的操纵cookies是很困难。

在这种情况下HTML5提供了一种在客户端本地保存数据的功能,他就是Web Storage功能。

Web Storage功能,就是在Web上存储数据的功能,而这里的存储,是针对客户端本地而言的,Web Storage分为两种。

  • sessionStorage

将数据保存在session对象中。所谓的session,是指用户在浏览某个网站时,从进入网站到浏览器关闭期间,session对象可以保存在这段时间内要求保存的任何数据。

  • localStorage

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

两者区别在于,sessionStorage为临时保存,而localStorage为永久保存。

二.使用sessionStorage或localStorage保存并读取数据

保存数据的方法很简单,只需调用setItem(key,value)方法即可,具体调用格式如下:

sessionStorage.setItem(key,value);
localStorage.setItem(key,value);
  •  参数key表示被保存内容的键名
  • 参数value表示保存内容的键值,在使用setItem()方法保存数据时,对应格式为‘键名,键值’。成功设置键名后不允许修改,重复。

读取被保存的数据,只需调用getItem(key)方法即可

sessionStorage.getItem(key);
localStorage.getItem(key);

 示例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
//sessionStorage 会话保存
/*function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("message",str);
}

function loadStorage(id) {
	var target = document.getElementById(id);
	var msg = sessionStorage.getItem("message");
	target.innerHTML = msg;
}*/

//localStorage 会话保存
function saveStorage(id) {
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("message",str);
}

function loadStorage(id) {
	var target = document.getElementById(id);
	var msg = localStorage.getItem("message");
	target.innerHTML = msg;
}
</script>
</head>

<body>
<h1>Web Storage示例</h1>
<p id='msg'></p>
<input type='text' id = 'input'/>
<input type='button' value="保存数据" onClick="saveStorage('input');"/>
<input type="button" value="读取数据" onClick="loadStorage('msg');"/>
<br/>

</body>
</html>

 

三.使用本地数据库保存数据

        上面介绍了Web Storage存储本地的方法,虽然这种存储方法比较简单,但Web Storage存储空间只有5MB。为此Web SQL数据库(Web DB),他内置SQLite数据库,对数据库操作可以通过executeSql()来实现,允许使用javaScript代码控制数据库的操作。

        Web DB可以实现数据的本地存储,他提供了关系数据库的基本功能,可以存储页面中交互的,复制的数据。即可以保存数据,也可以缓存从服务器获取的数据。Web DB通过事务驱动实现对数据的管理,支持多浏览器并发操作,而不发生存储冲突。

 常用API如下:

打开或创建数据库
openDatabase(DBName,DBVersion,DBDescribe,DBSize,Callback());
  • 参数DBName:表示数据库名称
  • 参数DBVersion:表示版本号
  • 参数DBSize:表示数据库的大小,单位为字节,如果是2MB,必须写成2*1024*1024;
  • 参数Callback():表示创建或打开数据成功后执行一个函数;
执行事务操作
executeSql(strSQL,[Arguments],SuccessCallback,ErrorCallback);
  •  参数strsSql:表示需要执行的SQL 语句;
  • 参数Arguments:表示语句需要的实参;
  • 参数SuccessCallback:表示SQL语句执行成功时的回调函数;
  • 参数ErrorCallback表示SQL语句执行出错时的回调函数;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script type="text/javascript">
if(window.openDatabase){
	alert('zhichi');		
} else {
	alert('buzhichi');	
}
var datatable = null;
var db = openDatabase('MyData1','','My Database',102400);

function init(){
	datatable = document.getElementById('datatable');
	showAllData();
}

function removeAllData(){
	for(var i = datatable.childNodes.length-1; i>=0; i--){
		datatable.removeChild(datatable.childNodes[i]);
	}
	var tr = document.createElement('tr');
	var th1 = document.createElement('th');
	var th2 = document.createElement('th');
	var th3 = document.createElement('th');
	th1.innerHTML = '姓名';
	th2.innerHTML = '留言';
	th3.innerHTML = '时间';
	tr.appendChild(th1);
	tr.appendChild(th2);
	tr.appendChild(th3);
	datatable.appendChild(tr);
}

function showData(row){
	var tr = document.createElement('tr');	
	var td1 = document.createElement('td');
	td1.innerHTML = row.name;
	var td2 = document.createElement('td');
	td2.innerHTML = row.message;
	var td3 = document.createElement('td');
	var t = new Date();
	t.setTime(row.time);
	td3.innerHTML = t.toLocaleDateString() + ' ' +t.toLocaleTimeString();
	tr.appendChild(td1);
	tr.appendChild(td2);
	tr.appendChild(td3);	
	datatable.appendChild(tr);
}

function showAllData(){
	db.transaction(function(tx){
		tx.executeSql('CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER',[]);
		tx.execustra
	});
	
	db.transaction(function(tx){
		tx.executeSql('create table if not exists MsgData(name TEXT,message TEXT,time INTEGER)',[]);
		tx.executeSql('select * from MsgData',[],function(tx,rs){
			removeAllData();
			for(var i = 0; i < rs.rows.length; i++){
				showData(rs.rows.item(i));	
			}
		});
	});
}

function addData(name,message,time){
	db.transaction(function(tx){
		tx.executeSql('insert into MsgData values(?,?,?)',[name,message,time],function(tx,rs){
				alert('成功保存数据');
			},	
			function(tx,error){
				alert(error.source + '::' + error.message);
			});
	});	
}
	
function saveData(){
	var name = document.getElementById('name4').value;
	var memo = document.getElementById('memo4').value;
	var time = new Date().getTime();
	addData(name,memo,time);	
	showAllData();
}
	
</script>
</head>

<body onLoad="init();">
<h1>使用本地数据库实现留言板</h1>
<table>
	<tr>姓名:<td></td><input type="text" id="name4"></tr>
   	<tr>留言:<td></td><input type="text" id="memo4"></tr>
    <tr>
    <td></td>
    <td><input type="button" value="保存" onClick="saveData();"</td>
    </tr>
</table>
<table id="datatable" border="1"></table>
<p id="msg4"></p>

</body>
</html>

 

 

 

 

 

 

分享到:
评论

相关推荐

    html5中的Web Storage

    HTML5中的Web Storage是网页应用用来在客户端存储数据的重要特性,它主要分为两种类型:sessionStorage和localStorage。这两种存储方式都是为了替代传统Cookie的局限性,提供更大的存储空间和更高效的本地数据管理。...

    【 YR-HTML5】Web Storage实现本地留言板

    HTML5引入了两种新的本地存储机制——`localStorage`和`sessionStorage`,它们为Web应用提供了更大的存储空间,并且数据只存在于用户本地浏览器中,不会随着HTTP请求发送到服务器,从而提高了应用性能和安全性。...

    HTML5本地存储之Web Storage详解

    在HTML5中,Web Storage是一项重要的本地存储技术,它解决了传统cookie存在的诸多问题,如大小限制和不必要的网络传输。Web Storage分为两种类型:Session Storage和Local Storage,两者都是用来在用户的浏览器上...

    HTML5本地存储之Database Storage应用介绍

    HTML5的本地存储机制扩展了Web应用程序的能力,使得开发者可以在用户浏览器中持久化地存储数据。在HTML5之前,Web应用程序依赖于Cookie来存储少量信息,但Cookie由于大小限制和性能原因并不适合大量数据的存储。...

    HTML5 WebStorage(HTML5本地存储技术)

    HTML5 WebStorage是现代网页应用中用于本地存储数据的关键特性,它解决了传统cookie技术的一些局限性,提供了更高效、安全的存储方式。WebStorage主要包含两种类型:localStorage和sessionStorage。 1. ...

    HTML5应用开发技术-Web Storage.pptx

    HTML5应用开发技术中,Web Storage是一个重要的特性,它...然而,需要注意的是,虽然Web Storage提供了强大的本地存储能力,但隐私问题不容忽视,开发者应当谨慎处理用户的个人数据,并确保遵循相关的数据保护法规。

    Web Storage.rar

    于是,Web Storage作为HTML5的一项重要特性应运而生,为开发者提供了更高效、更灵活的数据存储解决方案。 Web Storage分为两种类型:Session Storage和Local Storage。它们的主要区别在于数据的生命周期和作用范围...

    存储篇 2:本地存储——从 Cookie 到 Web Storage、IndexDB(1).md

    为了解决Cookie所带来的性能问题,并提供更为专业和高效的本地存储方案,HTML5标准推出了WebStorage技术。WebStorage提供了两种不同的存储方案:LocalStorage和SessionStorage。LocalStorage提供了永久性的数据存储...

    HTML5移动Web开发

    9. **本地存储(LocalStorage和SessionStorage)**:提供更强大的数据存储能力,比传统的cookie更安全,容量更大。 10. **离线通知(Push API)**:配合Service Worker,即使在浏览器关闭后也能接收到服务器推送的...

    HTML5 For Web Designers

    Web工作者存储`Web Storage`(包括`localStorage`和`sessionStorage`)则提供了比传统Cookie更大的存储空间,以适应现代Web应用的需求。 HTML5还包括了图形绘制和动画处理的新功能,如Canvas API,允许开发者通过...

    突袭HTML5之Javascript API扩展3—本地存储全新体验

    总的来说,HTML5的本地存储API极大地提升了Web应用在数据管理上的效率和用户体验,尤其是在处理大量数据或需要跨页面共享信息的场景下。同时,通过合理使用sessionStorage和localStorage,开发者可以创建更加智能且...

    HTML5本地存储——Web SQL Database

    HTML5本地存储是现代Web应用开发中的一个重要特性,它允许应用程序在用户的浏览器上存储大量数据,无需频繁地与服务器交互。Web SQL Database是HTML5本地存储的一种方式,它引入了一个完整的SQLite数据库系统,使得...

    Android开发教程之使用 HTML 5 开启移动 Web 应用程序的本地存储--千锋培训

    【Android开发教程之使用HTML5开启移动Web应用程序的本地存储】 HTML5的本地存储功能是其最引人注目的特性之一,它为Web开发者提供了一种有效存储大量数据的方法,从而替代了传统的Cookie存储方式。在移动应用领域...

    html5简易Web留言本

    HTML5的Web留言本是一个利用现代浏览器特性,特别是Web Storage技术来实现在线存储用户数据的应用。这个项目的核心目标是创建一个简单的留言板,用户可以在上面留下信息,且这些信息能够在用户下次访问时仍然存在,...

    html5-本地存储

    HTML5本地存储(LocalStorage)为Web开发带来了革命性的变化,使得Web应用能够更加高效地管理和利用客户端资源。通过本地存储,开发者可以轻松实现用户数据的持久化存储,提高用户体验的同时减轻服务器的压力。了解并...

Global site tag (gtag.js) - Google Analytics