HTML5本地化应用开发-HTML5 Web存储详解

文章不是简单的的Ctrl C与V,而是一个字一个标点符号慢慢写出来的。我认为这才是是对读者的负责,本教程由技术爱好者成笑笑(博客:http://www.chengxiaoxiao.com/)写作完成。如有转载,请声明出处。

介绍

我们把数据存储在浏览器,一直使用的Cookie,但其实Cookie是有很多数量和大小的限制的。现在我们不用考虑这些了,我们将要学习一种基于HTML5的新技术Web存储。来解决这个问题。

背景

虽然Web存储已经有了自己的规范((http://dev.w3.org/html5/webstorage/) ),并且也在独立于Html5进行开发。但Web存储通常是集中在HTML5技术之下的。

不像cookie一样,数据存储在Web Storage意味着客户端不在请求服务器了。通常情况下,在浏览器和服务器来回的传递数据用的是HTTP request,这限制了如果要在客户端存储大量数据,必须使用Cookie,但是如果服务器端用不到Cookie。而在请求时,也会把Cookie发送到服务器,浪费了大量带宽。并且浏览器强制限制了Cookie的大小和数量,在一个相同的域名上,你可以存储不多于50个cookie和4KB的大小。

使用Web Stroage就会解决以上两个问题。首先,它不会离开浏览器,其次,也允许存储更多更大的数据。W3C推荐限制在5MB之内,但是如果用户需要更多的存储,是可以在浏览器中进行设置的。当前一般浏览器会允2MB的容量。

还有另外一种存储方式就是FileSystem API (www.w3.org/TR/file-system-api/)。简单来水就是使用此api可以进行文件的读写操作,目前来说谷歌浏览器是当前兼容此功能的。

当然如果你对数据库感兴趣的话,你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/),这个api提供了可以存储大量存储内容数据的能力。目前为止,只有火狐、谷歌、IE10以上支持。

使用Web Storage

Web Storage主要包括本地存储和基于Session的存储。它是在域名之上的。如果你不删除这些存储,它是会一直存在的。

如果你想添加和修改数据,使用下面的Api:

localStorage.setItem(“mydata”,”this is a data”);

获取数据:var dat = localStorage.getItem(“mydata”);

当然下面的形式也可以使用的:

第一种:

var data = localStorage["myData"];

localStorage["mydata"] = “this is a data”;

第二种:

var data = localStorage.mydata;

localStorage.mydata = “this is a data”;

删除数据:

删除指定名称的数据:localStorage.removeItem(‘mydata’);

删除所有Web Storage中的数据:localStorage.clear();

可以存储的数据类型

Web Storage只能够存取字符串数据,所以如果你想存取更多的数据的话,你可以使用json对象,把它转换为json字符串。

var data = {“key”:”value”,”key1″:”value1″};

localStorage.setItem(“mydata”,JSON.stringify(data));

当你需要读取数据的时候可以把json解析成对象:

var data = JSON.parse(localStorage.mydata);

WebStorage的数量:localStorage.length.

获取索引的键:

var key =localStorage.key(0);//获取索引为0的键

var data = localStoragegetItem(key);获取值

通过循环我们就可以查找到存储的所有键值对了。

sessionStorage和localStorage有相同的api。不同的是SessionStorage是基于会话级别的。

微信号:net4k8k(做(4k+8k)+月薪的程序员)

微信名称:net知识分享

介绍:主要以发布和分享.Net和安卓文章为主,争做全栈开发工程师,爱学习,爱挑战,爱编程。

打造C#入门教程。总结自己已经习得的技术体系。分享到网络。为中国的软件复兴贡献自己的一份力。

如有不恰当之处,还请指正。

作者:成笑笑

职业:应届毕业生,找工作中。

本人联系方式:cxx@chengxiaoxiao.com

GitHub:https://github.com/shellcheng

My CnBlogs:http://www.cnblogs.com/happpytoo/

上一篇:HTML5 web存储


下一篇:Git基本原理-hash算法