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 相关文章推荐
CSS3实现的闪烁跳跃进度条示例(附源码)
Aug 19 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
CSS3中使用RGBA设置透明度的示例
Aug 04 HTML / CSS
CSS3哪些新特性值得称赞
Mar 02 HTML / CSS
详解如何在css3打包后自动追加前缀插件:autoprefixer
Dec 18 HTML / CSS
canvas学习笔记之2d画布基础的实现
Feb 21 HTML / CSS
HTML5中如何显示视频呢 HTML5视频播放demo
Jun 08 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
HTML CSS 一个标签实现带动画的抖音LOGO
Apr 26 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中使用Oracle数据库(3)
2006/10/09 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php探针不显示内存解决方法
2019/09/17 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
js 自带的sort() 方法全面了解
2016/08/16 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
2020/05/09 Javascript
Vuex的各个模块封装的实现
2020/06/05 Javascript
python实现ping的方法
2015/07/06 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
对python中raw_input()和input()的用法详解
2018/04/22 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python 读取串口数据的示例
2020/11/09 Python
CSS3 text-shadow实现文字阴影效果
2016/02/24 HTML / CSS
中国专业的综合网上购物商城:京东
2016/08/02 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
旅游管理专业学生求职信
2013/09/28 职场文书
给男朋友的道歉信
2014/01/12 职场文书
医药营销个人求职信
2014/04/12 职场文书
临床护理求职信
2014/04/26 职场文书
民间借贷协议书范本
2014/10/01 职场文书
2014年保洁工作总结
2014/11/24 职场文书
光荣之路观后感
2015/06/12 职场文书
带你彻底理解JavaScript中的原型对象
2021/04/14 Javascript
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Python使用protobuf序列化和反序列化的实现
2021/05/19 Python