html5指南-5.使用web storage存储键值对的数据


Posted in HTML / CSS onJanuary 07, 2013

本节课的内容是介绍web storage,使用它在浏览器里存储键值对的数据,功能上像以前的cookie一样,不过他更好,存储的数据可以更大。有两种类型的web storage:local storage和session storage,他们使用相同的实现机制,只是可见性和生命周期不同。
1.使用local storage
我们使用localStorage对象来访问local storage,他返回Storage对象,Storage用来存储键值对的数据,他有下面一些属性和方法:
clear():清楚存储的键值对数据;
getItem(<key>):通过key获取value值;
key(<index>):通过索引获取key值;
length:返回键值对的个数;
removeItem(<key>):通过key移出指定数据;
setItem(<key>,<value>):添加一个键值对,当指定key的键值对存在,则实现更新操作;
[<key>]:通过数组下标的方式,使用key获取指定value值。
Storage对象允许我们存储key和value都是字符串形式的键值对数据,key是唯一的,意味着当我们使用setItem方法添加键值对时,如果key值已经存在的话,将实现更新的操作。我们来看下面的例子:

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</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">There 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);
break;
case 'clear':
localStorage.clear();
break;
}
displayData();
}
function displayData() {
var tableElement = document.getElementById('data');
tableElement.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.getItem(key);
tableElement.innerHTML += '<tr><th>' + key + ':</th><td>' + val + '</td></tr>';
}
}
</script>
</body>
</html>

我们来看运行结果

html5指南-5.使用web storage存储键值对的数据


浏览器不能删除我们通过localStorage创建的数据,除非用户删除它。
2.监听Storage事件
通过local storage存储的数据对同源的文档具有可见性,比如你打开两个chrome浏览器访问同一个url地址,在任何一个页面上创建的local storage对另外一个页面也是可见的。但是如果用别的浏览器(如firefox)打开相同url地址,local storage是不可见的,因为他们不同源了。Storage事件就是用来监听storage的内容发生改变的,下面我们看他包含哪些属性:
key:返回发生改变的key值;
oldValue:返回发生改变key值以前的value值;
newValue:返回发生改变key值新的value值;
url:发生改变的url地址;
storageArea:返回发生改变的Storage对象(是local storage还是session storage)。
下面我们看个例子:
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Storage</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 tableElement = document.getElementById('data');
window.onstorage = function (e) {
var row = '<tr>';
row += '<td>' + e.key + '</td>';
row += '<td>' + e.oleValue + '</td>';
row += '<td>' + e.newValue + '</td>';
row += '<td>' + e.url + '</td>';
row += '<td>' + (e.storageArea == localStorage) + '</td></tr>';
tableElement.innerHTML += row;
}
</script>
</body>
</html>

我们在例1中增删改storage的数据,会在例2页面上显示出来。例2在chrome浏览器中运行正常,firefox没有反应,其他浏览器没有测试。
运行结果

html5指南-5.使用web storage存储键值对的数据


3.使用session storage
session storage在使用上和local storage一样,只是他的访问性上只限于当前页面,并且页面关闭后会消失,我们通过sessionStorage来访问它。
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</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">There are <span id="count"></span>items</p>
</div>
<table id="data" border="1">
<tr>
<th>Item Count:</th>
<td id="count">-</td>
</tr>
</table>
<iframe src="storage.html" width="500" height="175"></iframe>
<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);
break;
case 'clear':
sessionStorage.clear();
break;
}
displayData();
}
function displayData() {
var tableElement = document.getElementById('data');
tableElement.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.getItem(key);
tableElement.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
}
}
</script>
</body>
</html>

运行效果

html5指南-5.使用web storage存储键值对的数据


你在例3中做任何修改,例2的页面不会发生任何改变。
总结: 
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
web storage和cookie的区别:Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。还有,web storage每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生。
源码下载
HTML / CSS 相关文章推荐
css图标制作教程制作云图标
Jan 19 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
May 07 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
Dec 13 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
HTML 5 input placeholder 属性如何完美兼任ie
May 12 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
浅谈HTML5 Web Worker的使用
Jan 05 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 #HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 #HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 #HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 #HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 #HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 #HTML / CSS
html5中canvas学习笔记2-判断浏览器是否支持canvas
Jan 06 #HTML / CSS
You might like
十天学会php之第四天
2006/10/09 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
php实现点击可刷新验证码
2015/11/07 PHP
ThinkPHP5实现作业管理系统中处理学生未交作业与已交作业信息的方法
2016/11/12 PHP
详解thinkphp实现excel数据的导入导出(附完整案例)
2016/12/29 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
2019/07/25 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
Python 序列的方法总结
2016/10/18 Python
Python使用pymysql小技巧
2017/06/04 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
对Python3.x版本print函数左右对齐详解
2018/12/22 Python
Django中Middleware中的函数详解
2019/07/18 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
解决IDEA 的 plugins 搜不到任何的插件问题
2020/05/04 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
毕业生应聘幼儿园的自荐信
2013/11/20 职场文书
入党思想汇报
2014/01/05 职场文书
2014年机关工会工作总结
2014/12/19 职场文书
《王者天下》第4季首话新剧照 4月9日正式开播
2022/04/07 日漫
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技