`

HTML5之Web Storage本地存储

HTML5Web 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>

 

 

 

 

 

 

分享到：
| java基本数据类型
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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应用能够更加高效地管理和利用客户端资源。通过本地存储，开发者可以轻松实现用户数据的持久化存储，提高用户体验的同时减轻服务器的压力。了解并...

Magicbox
Global site tag (gtag.js) - Google Analytics