突袭HTML5之Javascript API扩展3—本地存储全新体验


Posted in HTML / CSS onJanuary 31, 2013

为什么要存数据到客户端?
存储数据在客户端可以解决很多的问题和减少不必要的传输数据:
1. 能保存程序的状态:用户关闭浏览器再打开后能知道他工作到哪了。
2. 能缓存数据:很多不会变化的数据根本没必要每次都从服务端获取。
3. 能保存用户的喜好:这种数据通常不需要存在服务端。
以前的做法
在HTML5本地存储之前,如果我们想在客户端保存持久化数据,有这么几个选择:
1. HTTP cookie。HTTP cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)。
2. IE userData。userData是微软在上世纪90年代的浏览器大战时推出的本地存储方案,借助DHTML的behaviour属性来存储本地数据, 允许每个页面最多存储64K数据,每个站点最多640K数据,userData的缺点显而易见,它不是Web标准的一部分,除非你的程序只需要支持IE, 否则它基本没什么用处。
3. Flash cookie。Flash cookie实际上和HTTP cookie并不是一回事,或许它的名字应该叫做"Flash本地存储”,Flash cookie默认允许每个站点存储不超过100K的数据,如果超出了,Flash会自动向用户请求更大的存储空间,借助Flash的 ExternalInterface接口,你可以很轻松地通过Javascript操作Flash的本地存储。Flash的问题很简单,就是因为它是 Flash。
4. Google Gears。Gears是Google在07年发布的一个开源浏览器插件,旨在改进各大浏览器的兼容性,Gears内置了一个基于SQLite的嵌入式 SQL数据库,并提供了统一API对数据库进行访问,在取得用户授权之后,每个站点可以在SQL数据库中存储不限大小的数据,Gears的问题就是 Google自己都已经不用它了。
眼花缭乱的各种技术导致的就是浏览器的兼容性问题。这里大家用的最多的可能就是cookie了。
HTML5中的全新体验
针对以上的问题,HTML5中给出了更加理想的解决方案:假如你需要存储的只是简单的用key/value对即可解决的数据,则可以使用Web Storage。
与Cookie相比,Web Storage存在不少的优势,概括为以下几点:
1. 存储空间更大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多。
2. 存储内容不会发送到服务器:当设置了Cookie后,Cookie的内容会随着请求一并发送的服务器,这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地,不会与服务器发生任何交互。
3. 更多丰富易用的接口:Web Storage提供了一套更为丰富的接口,使得数据操作更为简便。
4. 独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。
Web Storage分类
Web Storage实际上由两部分组成:sessionStorage与localStorage。
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
检查是否支持Web Storage
Web Storage在各大主流浏览器中都支持了,但是为了兼容老的浏览器,还是要检查一下是否可以使用这项技术。
第一种方式:通过检查Storage对象是否存在来检查浏览器是否支持Web Storage:

复制代码
代码如下:

if(typeof(Storage)!=="undefined"){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
// Sorry! No web storage support..
}

第二种方式就是分别检查各自的对象,例如检查localStorage是否支持:
复制代码
代码如下:

if (typeof(localStorage) == 'undefined' ) {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
} else {
// Yes! localStorage and sessionStorage support!
// Some code.....
}
或者:
if('localStorage' in window && window['localStorage'] !== null){
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}
或者
if (!!localStorage) {
// Yes! localStorage and sessionStorage support!
// Some code.....
} else {
alert('Your browser does not support HTML5 localStorage. Try upgrading.');
}

很显然第一个方式最直接,也最简单。
Web Storage的使用
Web Storage中存储的是键值对,而且浏览器会以字符串方式存储。记住在必要的时候将他们转为其他格式。
sessionStorage与localStorage除了用途不同外,成员列表是一样的:
复制代码
代码如下:

key = value: 存贮键值对
setItem(key, value): 存贮键值对
getItem(key): 取键值对
removeItem(key):移除所有键值对
clear():清空所有键值对
length:键值对的数目

这里还是要强调一下:setItem(key,value)方法中的value类型,理论上可以是任意类型,不过实际上浏览器会调用value的toString方法来获取其字符串值并存储到本地,因此如果是自定义的类型则需要自己定义有意义的toString方法。例如下面的例子结合JSON.stringify使用:
复制代码
代码如下:

var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person));
JSON.parse(localStorage.getItem('me')).name; // 'rainman'
/**
* JSON.stringify,将JSON数据转化为字符串
* JSON.stringify({'name': 'fred', 'age': 24}); // '{"name":"fred","age":24}'
* JSON.stringify(['a', 'b', 'c']); // '["a","b","c"]'
* JSON.parse,反解JSON.stringify
* JSON.parse('["a","b","c"]') // ["a","b","c"]
*/

此外,添加键值对的时候,如果添加的数量比较多,比较保险的做法是去检查是否有超出限额的异常:
复制代码
代码如下:

try {
localStorage.setItem(itemId, values.join(';'));
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('Quota exceeded!');
}
}

Web Storage的方法非常简单,下面的示例是统计button点击的次数的:
复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter()
{
if(typeof(Storage)!=="undefined")
{
if (localStorage.clickcount)
{
localStorage.clickcount=Number(localStorage.clickcount)+1;
}
else
{
localStorage.clickcount=1;
}
document.getElementById("result").innerHTML="You have clicked the button " + localStorage.clickcount + " time(s).";
}
else
{
document.getElementById("result").innerHTML="Sorry, your browser does not support web storage...";
}
}
</script>
</head>
<body>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<div id="result"></div>
<p>Click the button to see the counter increase.</p>
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p>
</body>
</html>

在上面的例子中,你可以把localStorage换成sessionStorage,点击几次button然后验证在关闭浏览器前后的效果。
存在的问题
Web Storage的缺陷主要集中在其安全性方面,具体体现在以下两点:
1. 浏览器会为每个域分配独立的存储空间,即脚本在域A中是无法访问到域B中的存储空间的,但是浏览器却不会检查脚本所在的域与当前域是否相同。即在域B中嵌入域A中的脚本依然可以访问域B中的数据。
2. 存储在本地的数据未加密而且永远不会过期,极易造成隐私泄漏。
此外,更多的安全相关的问题请参看后面实用参考中的链接。
其他规范一览(仅供了解,说不定什么时候就没了)
Web Database
在老的HTML5提议中,假如你需要存储复杂的数据则可以使用Web Database,可以像客户端程序一样使用SQL(Web Database标准已被废弃,这里就是简单提一下);
globalStorage
这个也是html5中提出来,在浏览器关闭以后,使用globalStorage存储的信息仍能够保留下来,localStorage一样,域中任何一个页面存储的信息都能被所有的页面共享, 不过目前只有FireFox支持。
基本语法:
• globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下面所有的子域都可以通过这个命名空间存储对象来进行读和写。
• globalStorage['mozilla.org'] —— 在mozilla.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
• globalStorage['org'] —— 在.org域名下面的所有网页都可以通过这个命名空间存储对象来进行读和写。
• globalStorage[''] —— 在任何域名下的任何网页都可以通过这个命名空间存储对象来进行读和写
方法属性:
• setItem(key, value) —— 设置或重置 key 值。
• getItem(key) —— 获取 key 值。
• removeItem(key) —— 删除 key 值。
• 设置 key 值:window.globalStorage["planabc.net"].key = value;
• 获取 key 值:value = window.globalStorage["planabc.net"].key;
其它特征:
• 过期时间同 localStorage,其它的一些特性也和localStorage相似。
• 现在Firefox只支持当前域下的globalStorage存储, 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。
IndexedDB
最后我们要介绍的就是IndexedDB了,相比其他两个规范,目前只有Firefox实现了IndexedDB(顺便提一下,Mozilla表示它们永远不会去实现Web SQL Database),不过Google已经表示正在考虑在Chrome中加入IndexDB支持。
IndexedDB引入了一个object store的概念,这有点像是一个SQL Database,你可以在“数据库”中存储“记录”,并且每条“记录”可以拥有很多“字段",每个字段都有一个特定的数据类型,你可以选择记录的子集, 并使用“光标”进行遍历,同时object store中的所有变更都是基于“事务”的。
更多的信息参看后面使用参考中讲述FireFox中IndexedDB的文档。
实用参考:
官方文档:http://www.w3schools.com/html5/
三水点靠木:https://3water.com/w3school/html5/
本地存储的安全性:http://www.mhtml5.com/2012/03/4586.html
FireFox的实验特性IndexedDB:https://developer.mozilla.org/en-US/docs/IndexedDB
HTML / CSS 相关文章推荐
CSS3教程(7):CSS3嵌入字体
Apr 02 HTML / CSS
分享CSS3中必须要知道的10个顶级命令
Apr 26 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
Aug 19 HTML / CSS
纯CSS3制作的鼠标悬停时边框旋转
Jan 03 HTML / CSS
Html5 localStorage入门教程
Apr 26 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
HTML5单页面手势滑屏切换原理
Mar 21 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
Jan 31 #HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 #HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 #HTML / CSS
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
Jan 30 #HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 #HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 #HTML / CSS
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
PHP下的Oracle客户端扩展(OCI8)安装教程
2014/09/10 PHP
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
Google的跟踪代码 动态加载js代码方法应用
2012/11/12 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
谷歌地图打不开的解决办法
2014/08/07 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
微信小程序表单验证错误提示效果
2017/05/19 Javascript
ES6解构赋值的功能与用途实例分析
2017/10/31 Javascript
vue-resource + json-server模拟数据的方法
2017/11/02 Javascript
Angular4的输入属性与输出属性实例详解
2017/11/29 Javascript
Vue 仿QQ左滑删除组件功能
2018/03/12 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
微信小程序开发背景图显示功能
2018/08/08 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
解决layer弹出层msg的文字不显示的问题
2019/09/11 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
2019/09/12 Javascript
nodejs环境使用Typeorm连接查询Oracle数据
2019/12/05 NodeJs
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python之eval()函数危险性浅析
2014/07/03 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
解决DataFrame排序sort的问题
2018/06/07 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
新西兰床上用品和家居用品购物网站:Adairs
2018/04/27 全球购物
企划专员岗位职责
2013/12/09 职场文书
函授药学自我鉴定
2014/02/07 职场文书
css样式important规则的正确使用方式
2022/06/10 HTML / CSS