【高级功能】使用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 ...
随机推荐
- Cocos2d-x 3.2 学习笔记（十一）Game 2048
一.规则 游戏2048的规则很简单 2+2=4 4+4=8 8+8=16 16+16=32 ……1024+1024=2048 这游戏挺火的……不过做起来也不难,就用cocos2dx做一下,首先我也没 ...
- AngularJS入门心得4——漫谈指令scope
上篇<AngularJS入门心得3——HTML的左右手指令>初步介绍了指令的概念和作用.已经和指令打过一个照面,就不会那么陌生了,今天主要介绍的是一个困扰了我很久终于想通的问题,这个问题与 ...
- Mysql在高并发情况下，防止库存超卖而小于0的解决方案
背景: 本人上次做申领campaign的PHP后台时,因为项目上线后某些时段同时申领的人过多,导致一些专柜的存货为负数(<0),还好并发量不是特别大,只存在于小部分专柜而且一般都是-1的状况,没 ...
- 【Android】Volley做网络请求的几种用法
前言: 最近在将自己写的烂代码重构,以前使用的网络请求全是基于apache的HttpClient,简单使用还好,使用多了发现重复代码太多,而且每次使用都很繁琐,因此在网上找了半天网络请求的相关类库,最 ...
- android 中resources管理
主要存在于res/value文件夹中 定义: dimen.xml:主要用于设置像素默认值 <resources> res/values/dimens.xml <dimen name= ...
- Azure China (2) Azure China管理界面初探
<Windows Azure Platform 系列文章目录> 首先是Q&A时间 1.我在Azure Global拥有测试账号或者免费的MSDN订阅账号,这个账号可以在国内Azur ...
- [New Portal]Windows Azure Virtual Machine (12) 在本地使用Hyper-V制作虚拟机模板，并上传至Azure (2)
<Windows Azure Platform 系列文章目录> 本章介绍的内容是将本地Hyper-V的VHD,上传到Azure数据中心,作为自定义的虚拟机模板. 注意:因为在制作VHD的最 ...
- 多iframe使用tab标签方式添加、删除、切换的处理实例
紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案 如果采用iframe来切换显示内容的方式来展现办公Web.那么需要解决几个问题 1.tab标签需要和显示的iframe ...
- MVC的控制器的激活过程，我们从MvcHandler开始讲，前面的事情以后再讲
一.从MvcHandler开始(不要觉得是代码,让你看懂才是最重要的) using Microsoft.Web.Infrastructure.DynamicValidationHelper; usin ...
- cdh完美集成kafka
前言 其实cloudera已经做了这个事了,只是把kafka的包和cdh的parcel包分离了,只要我们把分离开的kafka的服务描述jar包和服务parcel包下载了,就可以实现完美集成了. 具体实 ...