【高级功能】使用Web存储
Web存储允许我们在浏览器里保存简单的键/值数据。Web存储和cookie很相似，但它有着更好的实现方式，能保存的数据量也很大。这两种类型共享相同的机制，但是被保存数据的可见性和寿命存在区别。
PS:还有一种存储规范名为“索引数据库API”（Indexed Database API），它允许保存富格式数据和进行SQL风格的查询。
1.使用本地存储
我们可以通过全局属性 localStorage访问本地存储功能。这个属性会返回一个Storage 对象，下表对其进行了介绍。Storage 对象被用来保存键/值形式的字符串对。
Storage 对象可用来存储键/值对，其中键和值都是字符串。键必须是惟一的，这就意味着如果我们用 Storage对象里已经存在的键调用setItem方法，就会更新它的值。下面的示例展示了如何添加、修改和清除本地存储中数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用本地存储</title>
<style>
body > * {float: left;}
table {border-collapse: collapse;margin-left:50px; }
th,td {padding: 4px;}
th {text-align: right;}
input {border: thin solid black;padding: 2px;}
label {min-width: 50px;display: inline-block;text-align: right;}
#countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}
</style>
</head>
<body>
<div>
<div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>
<div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">These are <span id="count"></span> items </p>
</div>
<table id="data" border="1">
<tr><th>Item Count:</th><td id="count">-</td> </tr>
</table>
<script>
displayData();
var buttons = document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e){
switch (e.target.id){
case 'add':
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
localStorage.setItem(key,value);
displayData();
break;
case 'clear':
localStorage.clear();
displayData();
break;
}
}
function displayData(){
var tableElem = document.getElementById("data");
tableElem.innerHTML = "";
var itemCount = localStorage.length;
document.getElementById("count").innerHTML = itemCount;
for(var i=0;i<itemCount;i++){
var key = localStorage.key(i);
var val = localStorage[key];
tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
}
}
</script>
</body>
</html>
此例报告了本地存储中的项目数量，并枚举已保存的键/值对来填充一个表格元素。这里添加了两个button元素，在Add按钮被按下时将他们的内容保存为项目。在响应Clear按钮时，会清除本地存储中的内容。其显示效果如下：
浏览器不会删除我们用 localStorage对象添加的数据，除非用户自己清除浏览数据。
监听存储事件
通过本地存储功能保存的数据对所有来源相同的文档都是可用的。某个文档对本地存储进行修改时会触发storage事件，我们可以监听其他同源文档上的这个事件来确保我们能跟上最新的变化。
与storage事件同时指派的对象是一个StorageEvent对象，它的成员如下表所示：
下面的示例展示了一个文档，它会监听并编录本地存储对象上触发的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>编录本地存储事件</title>
<style>
table {border-collapse:collapse; }
th,td {padding: 4px;}
</style>
</head>
<body>
<table id="data" border="1">
<tr>
<th>key</th>
<th>oldValue</th>
<th>newValue</th>
<th>url</th>
<th>storageArea</th>
</tr>
</table>
<script>
var tableElem = document.getElementById("data");
window.onstorage = handleStorage;
function handleStorage(e){
var row = "<tr>";
row += "<td>" + e.key + "</td>";
row += "<td>" + e.oldValue + "</td>";
row += "<td>" + e.newValue + "</td>";
row += "<td>" + e.url + "</td>";
row += "<td>" + (e.storageArea == localStorage) + "</td>";
row += "</tr>";
tableElem.innerHTML += row;
}
</script>
</body>
</html>
storage事件是通过Window对象触发的，此对象可以来自共享被改动存储的任何一个文档。此例中，每次接收到事件时都会给table元素添加一个新行，演示效果如下：
图中的事件展示了给本地存储添加新项目的过程。url属性能帮助我们了解是哪个文档触发了变化。storageArea属性会返回发生变化的Storage对象，它可以是本地或会话存储对象。此例只接收来自本地存储对象的事件。
PS:这些事件不会再制造变化的文档内指派。
2. 使用会话存储
会话存储（session storage）的工作方式和本地存储很接近，不同之处在于数据是各个浏览上下文私有的，会在文档被关闭时移除。我们通过全局变量 sessionStorage访问会话存储，它会返回一个Storage对象。下面的例子展示了会话存储的用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用会话存储</title>
<style>
body > * {float: left;}
table {border-collapse: collapse;margin-left:50px; }
th,td {padding: 4px;}
th {text-align: right;}
input {border: thin solid black;padding: 2px;}
label {min-width: 50px;display: inline-block;text-align: right;}
#countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}
</style>
</head>
<body>
<div>
<div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>
<div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">These are <span id="count"></span> items </p>
</div>
<table id="data" border="1">
<tr><th>Item Count:</th><td id="count">-</td> </tr>
</table>
<script>
displayData();
var buttons = document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e){
switch (e.target.id){
case 'add':
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
sessionStorage.setItem(key,value);
displayData();
break;
case 'clear':
sessionStorage.clear();
displayData();
break;
}
}
function displayData(){
var tableElem = document.getElementById("data");
tableElem.innerHTML = "";
var itemCount = sessionStorage.length;
document.getElementById("count").innerHTML = itemCount;
for(var i=0;i<itemCount;i++){
var key = sessionStorage.key(i);
var val = sessionStorage[key];
tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
}
}
</script>
</body>
</html>
此例的工作方式和前面本地存储的例子很接近，不同之处在于可见性和寿命受到限制。这些限制会影响storage事件的处理方式：前面提到的storage事件只会在共享存储的文档中触发。对于会话存储，这就意味着事件只会在内嵌文档中触发，比如 iframe里的文档。修改前一示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用会话存储的storage事件</title>
<style>
body > * {float: left;}
table {border-collapse: collapse;margin-left:50px; }
th,td {padding: 4px;}
th {text-align: right;}
input {border: thin solid black;padding: 2px;}
label {min-width: 50px;display: inline-block;text-align: right;}
#countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}
iframe {clear: left;}
</style>
</head>
<body>
<div>
<div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>
<div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>
<div id="buttons">
<button id="add">Add</button>
<button id="clear">Clear</button>
</div>
<p id="countmsg">These are <span id="count"></span> items </p>
</div>
<table id="data" border="1">
<tr><th>Item Count:</th><td id="count">-</td> </tr>
</table>
<br />
<iframe src="storage-02.html" width="666" height="222"></iframe></div>
<script>
displayData();
var buttons = document.getElementsByTagName("button");
for(var i=0;i<buttons.length;i++){
buttons[i].onclick = handleButtonPress;
}
function handleButtonPress(e){
switch (e.target.id){
case 'add':
var key = document.getElementById("key").value;
var value = document.getElementById("value").value;
sessionStorage.setItem(key,value)
displayData();
break;
case 'clear':
sessionStorage.clear();
displayData();
break;
}
}
function displayData(){
var tableElem = document.getElementById("data");
tableElem.innerHTML = "";
var itemCount = sessionStorage.length;
document.getElementById("count").innerHTML = itemCount;
for(var i=0;i<itemCount;i++){
var key = sessionStorage.key(i);
var val = sessionStorage[key];
tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
}
}
</script>
</body>
</html>
其演示效果如下：
来源：《HTML5权威指南》(《The Definitive Guide to HTML5》)
【高级功能】使用Web存储的更多相关文章
- Oracle_高级功能(4) 数据库存储结构
数据库存储结构分为:物理存储结构和逻辑存储结构.物理结构和逻辑结构分开,对物理数据的存储不会影响对逻辑结构的访问.1.物理存储结构 数据库文件 os block2.逻辑存储结构 tablespace ...
- Tengine是由淘宝网发起的Web服务器项目。它在Nginx的基础上，针对大访问量网站的需求，添加了很多高级功能和特性
简介 Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很 ...
- MVC5 Entity Framework学习之Entity Framework高级功能(转)
在之前的文章中,你已经学习了如何实现每个层次结构一个表继承.本节中你将学习使用Entity Framework Code First来开发ASP.NET web应用程序时可以利用的高级功能. 在本节中 ...
- MVC5 Entity Framework学习之Entity Framework高级功能
在之前的文章中,你已经学习了怎样实现每一个层次结构一个表继承. 本节中你将学习使用Entity Framework Code First来开发ASP.NET web应用程序时能够利用的高级功能. 在本 ...
- 为ASP.NET MVC应用程序使用高级功能
为ASP.NET MVC应用程序使用高级功能 这是微软官方教程Getting Started with Entity Framework 6 Code First using MVC 5 系列的翻译, ...
- Xen之初体验：XenMotion、 StorageMotion、Site Recovery、Power Management 各种新、高级功能免费
Xenserver 的新版本6.2现在已经全面开源,省掉了原有的序列号,也能免费体验曾经标题中的付费高级功能. 安装镜像:http://downloadns.citrix.com.edgesuite. ...
- 【读书笔记】HTML5 Web存储
PS:这里讲web存储,主要是在客户端存储的一些技术:cookie,localstorage,sessionstorage,WebSQL. Cookie Cookie是HTML4中在客户端 ...
- 【温故而知新-Javascript】使用Web存储
Web存储允许我们在浏览器里保存简单的键/值数据.Web存储和cookie很相似,但它有着更好的实现方式,能保存的数据量也很大.这两种类型共享相同的机制,但是被保存数据的可见性和寿命存在区别. PS: ...
- HTML学习之Web存储（五）
本地数据库功能大大增强了Web应用对于本地存储数据的方式和功能.Web时代真正进入了:“客户端为重,服务端为轻的时代”. <!DOCTYPE html> <html xmlns=&q ...
随机推荐
- Java多线程系列--“基础篇”02之 常用的实现多线程的两种方式
概要 本章,我们学习“常用的实现多线程的2种方式”:Thread 和 Runnable.之所以说是常用的,是因为通过还可以通过java.util.concurrent包中的线程池来实现多线程.关于线程 ...
- JQuery 实现页面无刷新
对于JQuery实现页面无刷新的效果,即:应用这个JQuery这个组件,可以实现在页面上加载数据库中的数据信息,但是并没有给用户页面刷新的感觉,这样既可以有效的进行数据交互,也可以不妨碍用户的其他操作 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 通过zero copy来实现高效的数据传输
这段时间在学习一些系统底层的知识,真后悔大学没有好好学习操作系统,导致好多文章看不懂.说到这不得不吐槽一下,像介绍系统层次的一些书籍好多都是中文翻译版,而大部分的中文翻译版大都语句晦涩,难懂,而且极易 ...
- SQL Server代理(8/12)：使用SQL Server代理外部程序
SQL Server代理是所有实时数据库的核心.代理有很多不明显的用法,因此系统的知识,对于开发人员还是DBA都是有用的.这系列文章会通俗介绍它的很多用法. 在这个系列的上篇文章里,你学习如何使用SQ ...
- JPG渐进 & PNG/PNG24 交错测试
今天由同事说起,PS导出PNG时,有个选项"交错"是干啥的,想起这也是个问题,所以特意搞了个测试页面: 引用网上"交错-就是类似旧式电视的隔行扫描,让图片只花50%的时间 ...
- php+mysql+apache项目运行所遇到的一系列配置问题
今天运行一个php项目时,突然发现访问不了了.起因应该是mac系统升级,导致apache配置文件完全恢复到了默认状态,一切归零.作为一个经验尚欠的前端,对这些后台配置完全是一窍不通,赶紧微信联系了小胖 ...
- 获取DataTable选择第一行某一列值
数据源是一个DataTable,现在我们需要获取这个DataTable的第一行第一列的值.先准备一个数据集,创建一个DataTable,并填充数据: source code: using System ...
- Model元数据提供机制小结
在最开始先我得说说我看这部分的情况,最开始被各种ModelMetadata和各种ModelMetadataProvider给搞晕了,就几页书花了我好大的精力去看,直到后来看了一幅类图,细细看各个类之间 ...
- XMPP客户端开发(2)--发送接收消息
客户端连接上服务器并登录以后,可以发送.接收消息. 首先需要定义Chat,MessageListener和ChatMessageListener几个变量: private static Chat ch ...