一.Web Storage
在HTML5中，除了Canvas元素之外，另一个新增的非常重要的功能是可以在客户端本地保存数据的Web Storage功能，我们知道，在HTML4中可以使用cookies在客户端保存用户名灯简单的用户信息，但是，通过长期的实际使用下来，发现使用cookies存储数据存在弊端：
- 大小：cookies的大小被限制在4KB。
- 带宽：cookies是随HTTP事务一起被发送的，因此会浪费发送cookies的带宽。
- 复杂性：要正确的操纵cookies是很困难。
在这种情况下HTML5提供了一种在客户端本地保存数据的功能，他就是Web Storage功能。
Web Storage功能，就是在Web上存储数据的功能，而这里的存储，是针对客户端本地而言的，Web Storage分为两种。
将数据保存在session对象中。所谓的session，是指用户在浏览某个网站时，从进入网站到浏览器关闭期间，session对象可以保存在这段时间内要求保存的任何数据。
将数据保存在客户端本地的硬件设备(硬盘等)，即使浏览器关闭了，该数据仍然存在，下次打开浏览器访问网站仍然可以继续使用。
两者区别在于，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的相关资料，Web Storage如何用JSON存储多个数据，感兴趣的小伙伴们可以参考一下
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁 因此...
NULL 博文链接：https://yuruei2000.iteye.com/blog/1489088
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB，感兴趣的朋友可以了解下
主要介绍了详解H5本地储存Web Storage的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML5中很重要的技能之一就是：HTML5本地存储，今天就来说说这个技术，以及和其它存储方案的比较。
Web Storage是HTML5引入的一个非常重要的功能，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。 Web Storage又分为两种...
利用web Storage实现大数据的在线存储
在上一篇《HTML5本地存储之Web Storage篇》中，简单介绍了如何利用localStorage实现本地存储；实际上，除了sessionStorage和localStorage外，HTML5还支持通过本地数据库进行本地数据存储，HTML5采用的是SQLLite这种...
Storage.js是一个基于HTML5 Web本地存储的扩展解决方案，虽然IE早期不支持本地存储(localStorage),但是可以通过userData来实现更多的本地数据存储。由于cookie本身的不可替代性，Storage.js也添加了对cookie的封装...
webStorage是html5中用于本地化存储的一种方式，而在之前呢我们是用cookie的存储方式处理; 2.那它们之间的区别是什么？ Ⅰ.cookie存在的问题： ⅰ.cookie需要向服务端发送一个请求，服务端返回一个cookieId，存储用...
文档介绍了简介，先决条件，本地存储基础，Storage API，例子：利用本地存储实现高速缓存，清单 1. 最基本的 Twitter 搜索，本地保存，清单 2. 搜索和保存，快速本地数据加载，清单 3. 首先进行本地搜索，清单 4. ...
html5的一个非常cool的功能，就是web storage，类似于之前的cookie，不过与之不同的是，web storage 拥有本地5兆的容量可以存储，而cookie却只有4K，这是完全不能比的优势。webstrange又分为：localstorage，...
我深感性能优化实在是前端知识树中特别的一环——当你需要学习前端框架时，文档和源码几乎可以告诉你所有问题的答案，当你需要学习 Git 时，你也可以找到放之四海皆准的实践方案。但性能优化却不一样，它好像只能是...
前言 本章主要内容是Web Storage与本地...前面说过，webstorage是对cookie的优化而来，HTML4中使用cookie在客户端存储用户数据，长期使用发现存在以下问题： 大小限制在4kbcookie每次随HTTP事务一起发送，浪费带宽正确
yux-storage 是一个基于 HTML5 封装的 Web 本地数据离线存储库。 特点 使用类似 ， 无需考虑 IndexedDB 的复杂概念，上手无压力。 支持回调和 两种方式，各凭所愿。 无任何依赖，非常轻量，100 行左右的源码，压缩后...
第16章 本地存储与离线应用 535 16.1 Web Storage 536 16.2 Indexed数据库API 545 16.3 离线应用 564 16.4 本章小结 571 第17章 文件支持与二进制数据 572 17.1 HTML 5增强的文件上传域 573 17.2 ...