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/